Highcharts多級類別

Question

我正在使用highcharts，需要獲取列出的類別和子類別。

E.g：

我有一些運動員，我希望通過地方和性別列出的獎牌。

所以必須有列出的所有獎牌類型和分離，以男性和女性

類別

| GOLD | SILVER | BRONZE | 
    |male|female||male|female||male|female| 
    --------------------------------------- 
    | cl | cl | cl | cl | cl | cl | 

* CL =某些列與該類型的每性別

獎牌的數據是，可能在highcharts如果是，如何？

Answer 1

我認爲你需要一個堆積條形圖。請根據您的數據進行示例。 http://jsfiddle.net/AtGRH/

$(function() { 
     $('#container').highcharts({ 
      chart: { 
       type: 'bar' 
      }, 
      title: { 
       text: 'Stacked bar chart' 
      }, 
      xAxis: { 
       categories: ['Gold', 'Silver', 'Bronze'] 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Total fruit consumption' 
       } 
      }, 
      legend: { 
       backgroundColor: '#FFFFFF', 
       reversed: true 
      }, 
      plotOptions: { 
       series: { 
        stacking: 'normal' 
       } 
      }, 
       series: [{ 
       name: 'Male', 
       data: [5, 3, 4 ] 
      }, { 
       name: 'Female', 
       data: [2, 2, 3] 
      },] 
     }); 
    }); 

Answer 2

這是一個古老的要求，但因爲我有，只是做一些類似的想法我想分享的解決方案 - 在多個類別插件專爲HighCharts - 這裏是從的jsfiddle代碼 - http://jsfiddle.net/fieldsure/Lr5sjh5x/2/

$(function() { 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: "container", 
      type: "column", 
      borderWidth: 5, 
      borderColor: '#e8eaeb', 
      borderRadius: 0, 
      backgroundColor: '#f7f7f7' 
     }, 
     title: { 
      style: { 
       'fontSize': '1em' 
      }, 
      useHTML: true, 
      x: -27, 
      y: 8, 
      text: '<span class="chart-title"> Grouped Categories with 2 Series<span class="chart-href"> <a href="http://www.blacklabel.pl/highcharts" target="_blank"> Black Label </a> </span> <span class="chart-subtitle">plugin by </span></span>' 
     }, 
     yAxis: [{ // Primary yAxis 
      labels: { 
       format: '${value}', 
       style: { 
        color: Highcharts.getOptions().colors[0] 
       } 
      }, 
      title: { 
       text: 'Daily Tickets', 
       style: { 
        color: Highcharts.getOptions().colors[0] 
       } 
      } 
     }, { // Secondary yAxis 
      title: { 
       text: 'Invoices', 
       style: { 
        color: Highcharts.getOptions().colors[0] 
       } 
      }, 
      labels: { 
       format: '${value}', 
       style: { 
        color: Highcharts.getOptions().colors[0] 
       } 
      }, 
      opposite: true 
     }] 
     , 
     series: [{ 
      name: 'Daily', 
      type: 'column', 
      yAxis: 1, 
      data: [4, 14, 18, 5, 6, 5, 14, 15, 18], 
      tooltip: { 
       valueSuffix: ' mm' 
      } 

     }, { 
      name: 'Invoices', 
      type: 'column', 
      data: [4, 17, 18, 8, 9, 5, 13, 15, 18], 
      tooltip: { 
       valueSuffix: ' °C' 
      } 
     }], 
     xAxis: { 
      categories: [{ 
       name: "1/1/2014", 
       categories: ["Vendor 1", "Vendor 2", "Vendor 3"] 
      }, { 
       name: "1/2/2014", 
       categories: ["Vendor 1", "Vendor 2", "Vendor 3"] 
      }, { 
       name: "1/3/2014", 
       categories: ["Vendor 1", "Vendor 2", "Vendor 3"] 
      }] 
     } 
    }); 
});