Question

我想创建一个向下钻取图表，但是当单击某个条形或标签时，要显示的下一个图表将是首先从数据库中加载/获取数据。这意味着尚未预加载2级钻取。我不知道该怎么做或不知道要搜索的功能。

谢谢。

Answer 1

在drilldown事件中，您可以获取数据并使用addSeriesAsDrilldown方法：

Highcharts.chart('container', {
    chart: {
        type: 'column',
        events: {
            drilldown: function(e) {
                if (!e.seriesOptions) {

                    var chart = this,
                        source = {
                            Animals: 'https://api.myjson.com/bins/100f5h',
                            Fruits: 'https://api.myjson.com/bins/csik5',
                            Cars: 'https://api.myjson.com/bins/sxd1x'
                        };

                    chart.showLoading('Waiting for data...');

                    $.get(source[e.point.name], function(data) {
                        chart.hideLoading();
                        chart.addSeriesAsDrilldown(e.point, data[e.point.name]);
                    });
                }

            }
        }
    },
    ...

    series: [{
        ...,
        data: [{
            name: 'Animals',
            y: 5,
            drilldown: true
        }, {
            name: 'Fruits',
            y: 2,
            drilldown: true
        }, {
            name: 'Cars',
            y: 4,
            drilldown: true
        }]
    }],

    drilldown: {
        series: []
    }
});

实时演示： http://jsfiddle.net/BlackLabel/7r2z3t85/

API参考： https://api.highcharts.com/class-reference/Highcharts.Chart#addSeriesAsDrilldown

文档： https://www.highcharts.com/docs/chart-concepts/drilldown

单击时进行数据调用的Highchart向下钻取

1 个答案: