javascript - 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/