多系列和y轴同步钻取

Question

你好，我想使用HighChart包，并使JS图形具有钻取功能，

1. 同时在钻下水平上显示多个系列。
2. 使用多个(例如2) y轴来表示与这些系列在钻下水平上的不同单位.

根据守则的起点：

$(function () {
// Create the chart
$('#container').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Browser market shares. January, 2015 to May, 2015'
    },
    subtitle: {
        text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.'
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: 'Total percent market share'
        }

    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                format: '{point.y:.1f}%'
            }
        }
    },

    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
    },

    series: [{
        name: 'Brands',
        colorByPoint: true,
        data: [{
            name: 'Microsoft Internet Explorer',
            y: 56.33,
            drilldown: 'Microsoft Internet Explorer'
        }, {
            name: 'Chrome',
            y: 24.03,
            drilldown: 'Chrome'
        }, {
            name: 'Firefox',
            y: 10.38,
            drilldown: 'Firefox'
        }, {
            name: 'Safari',
            y: 4.77,
            drilldown: 'Safari'
        }, {
            name: 'Opera',
            y: 0.91,
            drilldown: 'Opera'
        }, {
            name: 'Proprietary or Undetectable',
            y: 0.2,
            drilldown: null
        }]
    }],
    drilldown: {
        series: [{
                name: 'Microsoft Internet Explorer',
            id: 'Microsoft Internet Explorer', 
            categories: ['v11','v8','v9','v10','v7'],
            type: 'spline',
            data: [
                    ['v11',25],
                    ['v8',17],
                ['v9',8],
                ['v10',5],
                ['v7',3]]
        }, {
            name: 'Chrome',
            id: 'Chrome',
            data: [
                ['v40.0',5],
                ['v41.0',4.32],
                ['v42.0',3.68]
            ]
        }]
    }
});
});

http://jsfiddle.net/h5xjp8h5/2/

有三个js源代码：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

但是，当我像下面这样做钻取部分代码时：

    drilldown: {
        series: [{
                name: 'Microsoft Internet Explorer',
            id: 'Microsoft Internet Explorer', 
            type: 'spline',
            data: [
                    ['v11',25],
                    ['v8',17],
                ['v9',8],
                ['v10',5],
                ['v7',3]]
        }, {
                name: 'Microsoft Internet Explorer Cost',
            id: 'Microsoft Internet Explorer', 
            type: 'spline',
            yAxis: 1,
            data: [
                    ['v11',50],
                    ['v8',40],
                ['v9'60],
                ['v10',65],
                ['v7',73]]
        }, {
            name: 'Chrome',
            id: 'Chrome',
            data: [
                ['v40.0',5],
                ['v41.0',4.32],
                ['v42.0',3.68]
            ]
        }]
    }

Y轴部分：

    yAxis: [{
        title: {
            text: 'Total percent market share'
        }

    },
                    {
        title: {
                text: 'cost'
        },
            opposite: true
    }],

http://jsfiddle.net/h5xjp8h5/3/

它不起作用。

有人能帮我一下吗？

1)我想在微软的Internet上进行深入研究，通过两个样条序列，一个是版本使用，另一个是版本成本。

2)我想要这两个系列。

( 3)使用两个y轴。

先谢谢你。

Answer 1

您可以使用钻取事件回调函数添加新的系列，作为您的钻取：

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

致以亲切的问候。