Question

我正在尝试提供一个图表，显示正在进行的项目的当前进度。因此，基本上一旦打开绘图，它将显示一个堆积区域中的通过，失败和未运行测试运行的图。

我想深入研究主要数据（通过，失败，未运行）。我想基本上显示可能已经通过，失败或未运行的团队。让我们说你想要深入了解＆＃34;通过＆＃34;，一旦你点击＆＃34;通过＆＃34;，它应该带来多个系列，每个系列包含球队名称和金额通过考试。

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

演示：

＆＃13;

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
      }]
    }]
  }
});

＆＃13;

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

＆＃13;

Answer 1

首先，您需要为每个系列设置多个向下钻取系列（例如，三个用于'通过'，三个用于'失败'，三个用于'未运行'）。其次，向下钻取多个系列的唯一方法是使用名为drilldown的函数在addSingleSeriesAsDrilldown事件上添加它们。添加所需的系列时，您只需要使用applyDrilldown功能应用它们。看一下下面的例子，如果有任何问题，请随时询问。

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

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

Highcharts：堆叠区域深入到多个系列

1 个答案: