如何在内部明细中创建堆叠和分组的柱形图？

Question

使用大量示例，我试图在向下钻取（内部图表）中创建堆叠和分组的图表，但一次仅显示单个图表（堆叠或分组）

Answer 1

您可以通过在向下钻取事件中为要显示的每个系列使用chart.addSingleSeriesAsDrilldown()加载向下钻取堆叠的系列，然后再调用chart.applyDrilldown()来实现此目的。查看下面发布的演示和代码。

代码：

$(function() {

  // Create the chart
  $('#container').highcharts({
    chart: {
      type: 'column',
      events: {
        drilldown: function(e) {
          if (!e.seriesOptions) {
            var chart = this,
              drilldowns = {
                'Animals1': {
                  name: 'Animals',
                  stack: 'sortA',
                  color: Highcharts.getOptions().colors[0],
                  data: [
                    ['Cows', 2],
                    ['Sheep', 3]
                  ]
                },
                'Animals2': {
                  name: 'Animals',
                  stack: 'sortA',
                  color: Highcharts.getOptions().colors[1],
                  data: [
                    ['Cows', 12],
                    ['Sheep', 10]
                  ]
                },
                'Animals3': {
                  name: 'Animals',
                  stack: 'sortB',
                  color: Highcharts.getOptions().colors[2],
                  data: [
                    ['Cows', 15],
                    ['Sheep', 6]
                  ]
                },
                'Animals4': {
                  name: 'Animals',
                  stack: 'sortB',
                  color: Highcharts.getOptions().colors[3],
                  data: [
                    ['Cows', 2],
                    ['Sheep', 11]
                  ]
                },
                'Fruits1': {
                  name: 'Fruits',
                  stack: 'sortA',
                  color: Highcharts.getOptions().colors[0],
                  data: [
                    ['Apples', 5],
                    ['Oranges', 1],
                    ['Bananas', 4]
                  ]
                },
                'Fruits2': {
                  name: 'Fruits',
                  stack: 'sortA',
                  color: Highcharts.getOptions().colors[1],
                  data: [
                    ['Apples', 15],
                    ['Oranges', 11],
                    ['Bananas', 22]
                  ]
                },
                'Fruits3': {
                  name: 'Fruits',
                  stack: 'sortB',
                  color: Highcharts.getOptions().colors[2],
                  data: [
                    ['Apples', 12],
                    ['Oranges', 7],
                    ['Bananas', 6]
                  ]
                },
                'Fruits4': {
                  name: 'Fruits',
                  stack: 'sortB',
                  color: Highcharts.getOptions().colors[3],
                  data: [
                    ['Apples', 15],
                    ['Oranges', 17],
                    ['Bananas', 9]
                  ]
                },
              },
              i;

            for (i = 1; i < 5; i++) {
              chart.addSingleSeriesAsDrilldown(
                e.point,
                drilldowns[e.point.name + i]
              );
            }

            chart.applyDrilldown();
          }

        }
      }
    },
    xAxis: {
      type: 'category'
    },
    legend: {
      enabled: false
    },
    plotOptions: {
      series: {
        borderWidth: 0,
        dataLabels: {
          enabled: true
        }
      },
      column: {
        stacking: 'normal'
      }
    },
    series: [{
      name: 'Things',
      colorByPoint: true,
      data: [{
        name: 'Animals',
        y: 5,
        drilldown: true
      }, {
        name: 'Fruits',
        y: 2,
        drilldown: true
      }]
    }],
    drilldown: {
      series: []
    }
  });
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

演示：

• https://jsfiddle.net/BlackLabel/sdxprb3o/