Развертка Highchart с вызовом данных при нажатии

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