Question

您好我想使用HighChart软件包并使JS具有钻取功能 1.同时在下钻水平显示多个系列 2.使用多个（比如说2）y轴来指示这些系列中钻井级别的不同单位。

基于代码的起点：

    var query = client.query("select * from usuario");

    query.on('row', function(user) {
    var queryInterest = client.query("select interes.nombre from interes inner join relacioniu on relacioniu.idinteres=interes.id where relacioniu.idusuario = '"+user.id+"'");
    queryInterest.on('row',function(row) {
            user.interest = row;
            console.log("user added");
        });
    users.push(user);
    });
// After all data is returned, close connection and return results
    query.on('end', function() {
        done();
        console.log("finish");
        return res.json(users);
    });

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

有三个js源代码：

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

但是，当我按照以下内容编写深入部分代码时：

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

使用y轴部分：

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

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

它不起作用。

有人可以帮我解决这个问题：
1）我想深入了解Microsoft Internet Explore到两个样条系列的视图，一个版本使用，另一个版本使用。
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/

亲切的问候。

高图深入到同时多个系列和y轴

1 个答案: