Highcharts 向下钻取和组合图表类型

Question

我想在我的向下钻取图表（在子图表中）列和样条曲线上混合，如下所示： https://jsfiddle.net/lostrailler/Ljotp059/

但是当我尝试的时候，我并没有同时拥有这两者。这是我的代码：

var chart = new Highcharts.Chart({
        chart: {
        renderTo: 'container',
        type: 'column'
    },
    title: {
        text: 'Scores par paliers'
    },
    xAxis: {
        type: 'category',
        labels: {
            rotation: -45,
            align: 'right',
            style: {
                fontFamily: 'Verdana, sans-serif'
            }
        },
        min: 0
    },
    yAxis: {
        title: {
            text: 'Score'
        },
        max: 100,
        tickInterval: 10,
        min: 0
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true
            }
        }
    },
    exporting: {
        enabled: true
    },
    tooltip: {
        formatter: function() {
            if (this.point.drilldown) {
                var s = this.key +' : <b>'+ this.y +' %</b>';
            } else {
                var s = this.key +' : <b>'+ this.y + '</b>';
            }
            return s;
        }
    },
    series: [{
            name: 'Marches',
        colorByPoint: true,
        data: [
            {
                name: 'Step 1',
                y: 89,
                drilldown: 'step1'
            },
            {
                name: 'Step 2',
                y: 17,
                drilldown: 'step2'
            }]
    }],
    drilldown: {
        drillUpButton: {
            relativeTo: 'spacingBox',
            position: {
                y: 0,
                x: -50
            }
        },
        series: [
            {
                id: 'step1',
                name: 'Step 1',
                type: 'column',
                data: [['Game 1', 100],['Game 2', 100],['Game 3', 100]]
            },
            {
                id: 'step2',
                name: 'Step 2',
                type: 'column',
                data: [['Game 1', 0],['Game 2', 100],['Game 3', 0]]
            },
            {
                id: 'step1',
                name: 'Step 1',
                type: 'spline',
                data: [['Game 1', 83],['Game 2', 82],['Game 3', 79]]
            },
            {
                id: 'step2',
                name: 'Step 2',
                type: 'spline',
                data: [['Game 1', 0],['Game 2', 100],['Game 3', 0]]
            }]
    }
});

JsFiddle : https://jsfiddle.net/lostrailler/fe1zzwph/

有什么想法吗？

非常感谢。

Answer 1

您可以使用向下钻取事件回调函数添加新系列作为向下钻取： http://api.highcharts.com/highcharts#chart.events.drilldown

drilldown: function(e) {
  var chart = this,
    drilldowns = chart.userOptions.drilldown.series,
    series = [];
  e.preventDefault();
  Highcharts.each(drilldowns, function(p, i) {
    if (p.id.includes(e.point.name)) {
      chart.addSingleSeriesAsDrilldown(e.point, p);
    }
  });
  chart.applyDrilldown();
}

您可以使用 addSingleSeriesAsDrilldown()，方法类似于：http://api.highcharts.com/highcharts#Chart.addSeriesAsDrilldown

但您可以使用此方法添加多个系列作为下钻。

在这里您可以看到它如何工作的示例：

http://jsfiddle.net/h5xjp8h5/12/

亲切的问候。

Highcharts 向下钻取和组合图表类型

Highcharts drilldown and combining chart type

javascript

jquery

highcharts

drilldown