Highcharts：堆叠区域向下钻取到多个系列

Question

我正在尝试展示一个图表，显示正在进行的项目的当前进度。所以基本上一旦你打开情节，它会在堆叠区域显示通过、失败和未运行测试运行的情节。

我想深入了解主要数据（通过、失败、未运行）。我想基本上展示可能已经通过、失败或未运行的团队。假设您要深入了解“通过”，一旦单击“通过”，它应该会带来多个系列，每个系列都包含团队名称和通过的测试数量。

JSfiddle: https://jsfiddle.net/9aqbLzar/3/

演示：

Highcharts.Tick.prototype.drillable = function() {};
Highcharts.setOptions({
  lang: {
    drillUpText: '◁ Go back'
  }
});

Highcharts.chart('container', {
  chart: {
    type: 'area'
  },
  xAxis: {
    type: 'datetime',
    tickmarkPlacement: 'on',
    title: {
      enabled: false
    }
  },
  yAxis: {
    allowDecimals: false,
    title: {
      text: "Test runs"
    }
  },
  tooltip: {
    shared: false
  },
  plotOptions: {
    area: {
      stacking: 'normal',
      lineColor: null,
      lineWidth: 1,
      marker: {
        enabled: false,
        lineWidth: 1,
        lineColor: null,
        symbol: 'circle',
        radius: 3
      }
    },
    cursor: 'pointer',
    trackByArea: true
  },
  series: [{
      name: 'Passed',
      data: [{
        x: Date.UTC(2017, 09, 06),
        y: 20,
        drilldown: 'Passed'
      }, {
        x: Date.UTC(2017, 09, 07),
        y: 21,
        drilldown: 'Passed'
      }, {
        x: Date.UTC(2017, 09, 08),
        y: 22,
        drilldown: 'Passed'
      }, {
        x: Date.UTC(2017, 09, 09),
        y: 23,
        drilldown: 'Passed'
      }]
    },
    {
      name: 'Failed',
      data: [{
        x: Date.UTC(2017, 09, 06),
        y: 6,
        drilldown: 'Failed'
      }, {
        x: Date.UTC(2017, 09, 07),
        y: 5,
        drilldown: 'Failed'
      }, {
        x: Date.UTC(2017, 09, 08),
        y: 4,
        drilldown: 'Failed'
      }, {
        x: Date.UTC(2017, 09, 09),
        y: 3,
        drilldown: 'Failed'
      }]
    },
    {
      name: 'Not run',
      data: [{
        x: Date.UTC(2017, 09, 06),
        y: 8,
        drilldown: 'Not run'
      }, {
        x: Date.UTC(2017, 09, 07),
        y: 7,
        drilldown: 'Not run'
      }, {
        x: Date.UTC(2017, 09, 08),
        y: 6,
        drilldown: 'Not run'
      }, {
        x: Date.UTC(2017, 09, 09),
        y: 5,
        drilldown: 'Not run'
      }]
    }
  ],
  drilldown: {
    series: [{
      id: 'Passed',
      data: [{
        x: Date.UTC(2017, 09, 11),
        y: 1
      }, {
        x: Date.UTC(2017, 09, 12),
        y: 2
      }, {
        x: Date.UTC(2017, 09, 13),
        y: 3
      }, {
        x: Date.UTC(2017, 10, 14),
        y: 5
      }]
    }, {
      id: 'Failed',
      data: [{
        x: Date.UTC(2017, 09, 09),
        y: 5
      }, {
        x: Date.UTC(2017, 09, 10),
        y: 6
      }, {
        x: Date.UTC(2017, 09, 11),
        y: 7
      }, {
        x: Date.UTC(2017, 10, 12),
        y: 8
      }, {
        x: Date.UTC(2017, 10, 13),
        y: 9
      }]
    }, {
      id: 'Not run',
      data: [{
        x: Date.UTC(2017, 09, 09),
        y: 5
      }, {
        x: Date.UTC(2017, 09, 10),
        y: 6
      }, {
        x: Date.UTC(2017, 09, 11),
        y: 7
      }, {
        x: Date.UTC(2017, 10, 12),
        y: 8
      }, {
        x: Date.UTC(2017, 10, 13),
        y: 9
      }]
    }]
  }
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.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>

Answer 1

首先，您需要为每个系列设置多个细分系列（例如，三个用于“通过”，三个用于“失败”，三个用于“未运行”）。其次，深入研究多个系列的唯一方法是使用名为addSingleSeriesAsDrilldown 的函数将它们添加到drilldown 事件中。添加所需系列后，您只需使用applyDrilldown 函数应用它们。请看下面的示例，如有任何问题，请随时提问。

API 参考：
https://api.highcharts.com/highcharts/chart.events.drilldown

示例：
https://jsfiddle.net/7a6gh7vz/