每列堆叠列两个值

时间:2017-02-13 17:08:23

标签: javascript jquery html css highcharts

在highcharts中是否有一种方法可以堆叠每列有两个值的列。不完整项目与已完成项目我想要的是Aaron的一列具有不完整和已完成的值,然后是Johns Team的下一列,其中包含不完整和已完成的值?在此先感谢您的帮助 我的代码如下:



$(function() {
  $('#container').highcharts({
    chart: {
      type: 'column'
    },
    title: {
      text: 'Complete vs Incomplete Tasks (by Team)'
    },
    xAxis: {
      categories: ['Aarons Team' /*,'Johns Team' */ ]
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Tasks'
      }
    },
    legend: {
      reversed: true
    },
    plotOptions: {
      series: {
        stacking: 'normal'
      }
    },
    series: [{
        name: 'Aarons Team',
        data: [4]
      }, //incomplete projects
      {
        name: 'Aarons Team',
        data: [2]
      } // completed projects
      /* {name: 'Johns Team', data:[6]},              //incompleted projects
         {name: 'Johns Team', data:[4]}               // completed projects
       */

    ]

  });
});

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

我明白了。 对于每个额外的列,您必须为前一列放置0或NULL。

     { name: 'Aarons Team', data:[4] },  //incomplete projects
        { name: 'Aarons Team', data:[2]}    // completed projects
         {name: 'Johns Team', data:[0,6]},              //incompleted projects
         {name: 'Johns Team', data:[0,4]}               // completed projects

答案 1 :(得分:0)

如果我正确理解您的问题,您要求的是堆积柱形图的基本功能。

您可以这样设置:

xAxis: {
  categories: ['Aaron','John']
},
series: [{
  name: 'Complete',
  data: [5,7]
}, {
  name: 'Incomplete',
  data: [8,9]
}]

<强>小提琴:

<强>输出:

enter image description here