Highcharts多层钻孔用于堆叠柱

时间:2018-03-10 11:05:56

标签: jquery highcharts stacked-chart drilldown

可以找到大量关于多级钻取的示例,但不能用于堆叠列。在这个JSfiddle中,有两个堆叠的列钻取。我希望有可能从第二个堆叠列中的Cats移动到新的下钻单柱形图。

有没有人有想法从第二个堆积柱形图移动到新的柱形图?

JavaScript的:

    $(function() {

    // Create the chart
    $('#container').highcharts({
      chart: {
        type: 'column',
        events: {
          drilldown: function(e) {
            if (!e.seriesOptions) {
              var drilldowns = {
                  'animals': {
                    name: 'Cats',
                    color: '#fa7921',
                    drilldown: 'Cats',
                    data: [
                      ['2014', 10],
                      ['2015', 10],
                      ['2016', 15],
                    ]
                  }
                },
                drilldowns2 = {
                  'animals': {
                    name: 'Cows',
                    color: '#9bc53d',
                    data: [
                      ['2014', 13],
                      ['2015', 15],
                      ['2016', 15]
                    ]
                  }
                },
                drilldowns3 = {
                  'animals': {
                    name: 'Sheep',
                    color: '#e55934',
                    data: [
                      ['2014', 13],
                      ['2015', 15],
                      ['2016', 15]
                    ]
                  }
                };

              this.addSingleSeriesAsDrilldown(e.point, drilldowns[e.point.name]);
              this.addSingleSeriesAsDrilldown(e.point, drilldowns2[e.point.name]);
              this.addSingleSeriesAsDrilldown(e.point, drilldowns3[e.point.name]);
              this.applyDrilldown();
            }
          }
        }
      },
      title: {
        text: 'Async drilldown'
      },
      xAxis: {
        type: 'category'
      },

      legend: {
        enabled: false
      },

      plotOptions: {
        series: {
          stacking: 'normal',
          borderWidth: 0,
          dataLabels: {
            enabled: true
          }
        }
      },

      series: [{
        name: 'Cats',
        color: '#fa7921',
        data: [{
          name: 'animals',
          y: 5,
          drilldown: true
        }]
      }, {
        name: 'Cows',
        color: '#9bc53d',
        data: [{
          name: 'animals',
          y: 5,
          drilldown: true
        }]
      }, {
        name: 'Sheep',
        color: '#e55934',
        data: [{
          name: 'animals',
          y: 5,
          drilldown: true
        }]
      }],

      drilldown: {
        series: []
      }
    });
  });

0 个答案:

没有答案