2014-08-28 95 views
0

我也有类似的对Highcharts网站每月平均降雨量演示图表堆叠的一面:http://www.highcharts.com/demo/column-basicHighcharts并排比较

但我想每个月的城市数据进一步分割成堆叠在两个子类别对方Fiddle

$('#Bar1170hMonthly').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Monthly Counts' 
     }, 
     subtitle: { 
      text: '' 
     }, 
     xAxis: { 
      categories: [ 
       'Jan', 
       'Feb', 
       'Mar', 
       'Apr', 
       'May', 
       'Jun', 
       'Jul', 
       'Aug', 
       'Sep', 
       'Oct', 
       'Nov', 
       'Dec' 
      ] 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Counts' 
      } 
     }, 
     tooltip: { 
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
      pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
       '<td style="padding:0"><b>{point.y:f} cases</b></td></tr>', 
      footerFormat: '</table>', 
      shared: true, 
      useHTML: true 
     }, 
     plotOptions: { 
      column: { 
       //stacking: 'normal', 
       pointPadding: 0.2, 
       borderWidth: 0 
      } 
     }, 
     series: { 
     cursor: 'pointer', 
     point: { 
       events: { 
        click: function() { 

        } 
       } 
      } 
     } 

     , series: [ 
      { 
      grouping:true,  
      name: '2011: 36', 
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 19] 

     }, { 
      name: '2012: 237', 
      data: [13, 14, 35, 23, 37, 11, 23, 22, 8, 12, 18, 21] 

     }, { 
      name: '2013: 360', 
      data: [43, 23, 35, 18, 44, 23, 35, 24, 23, 31, 25, 36] 

     }, 
     { 
      name: '2014: 112', 
      data: [[7, 8], [1, 2], [1, 2], 32, 9, 0, 0, 0, 0, 0, 0, 0] 

     }] 

    }); 

对于每个月每一年我要计数分成两个子类别A,b和堆叠在彼此的顶部。那可能吗?

+0

不确定你的'a'和'b'是什么意思,你能快速勾画你的预期输出应该是什么? – Duniyadnd 2014-08-28 23:56:02

+0

'A','B'只是子类别名称。 Pawel Fus按照我的意愿回答了这个问题。 – rmcn 2014-08-29 16:07:51

回答

1

您需要使用stacking: "normal"和每个堆栈集stack: "id",其中id必须介于两者之间。例如:http://jsfiddle.net/7jfcpyo2/4/

{ 
    stacking: true, 
    stack: 'B', 
    name: '2014: 112: stack A', 
    data: [6, 1, 1, 32, 9, 0, 0, 0, 0, 0, 0, 0] 

}, { 
    stacking: true, 
    stack: 'B', 
    name: '2014: 112: stack B', 
    data: [9, 2, 2, 32, 9, 0, 0, 0, 0, 0, 0, 0] 

} 

这两个系列以上将堆叠在彼此与干扰任何其他系列。你可以根据你的需要选择多少堆。

+0

完美的作品Pawel Fus非常感谢你! – rmcn 2014-08-29 15:48:16