Highcharts 异步向下钻取答案

【问题标题】：High Chart Async drilldownHighcharts 异步向下钻取
【发布时间】：2018-05-31 20:13:55
【问题描述】：

我正在关注http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/async/ 用于制作明细图的链接。

我无法理解如何为 drilldowns = {} 设置值（从 ajax 调用动态）和series = drilldowns[e.point.name];

drilldowns = {
                            'Animals': {
                                name: 'Animals',
                                data: [
                                    ['Cows', 2],
                                    ['Sheep', 3]
                                ]
                            },
                            'Fruits': {
                                name: 'Fruits',
                                data: [
                                    ['Apples', 5],
                                    ['Oranges', 7],
                                    ['Bananas', 2]
                                ]
                            },
                            'Cars': {
                                name: 'Cars',
                                data: [
                                    ['Toyota', 1],
                                    ['Volkswagen', 2],
                                    ['Opel', 5]
                                ]
                            }
                        }

我已经尝试搜索.addSeriesAsDrilldown(e.point, series)；

请帮助我了解如何通过 $.ajax 调用实现向下钻取。

$(function () {    

// Create the chart
$('#container').highcharts({
    chart: {
        type: 'column',
        events: {
            drilldown: function (e) {
                if (!e.seriesOptions) {

                    var chart = this,
                        drilldowns = {
                            'Animals': {
                                name: 'Animals',
                                data: [
                                    ['Cows', 2],
                                    ['Sheep', 3]
                                ]
                            },
                            'Fruits': {
                                name: 'Fruits',
                                data: [
                                    ['Apples', 5],
                                    ['Oranges', 7],
                                    ['Bananas', 2]
                                ]
                            },
                            'Cars': {
                                name: 'Cars',
                                data: [
                                    ['Toyota', 1],
                                    ['Volkswagen', 2],
                                    ['Opel', 5]
                                ]
                            }
                        },
                        series = drilldowns[e.point.name];

                    // Show the loading label
                    chart.showLoading('Simulating Ajax ...');

                    setTimeout(function () {
                        chart.hideLoading();
                        chart.addSeriesAsDrilldown(e.point, series);
                    }, 1000);
                }

            }
        }
    },
    title: {
        text: 'Async drilldown'
    },
    xAxis: {
        type: 'category'
    },

    legend: {
        enabled: false
    },

    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
            }
        }
    },

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

    drilldown: {
        series: []
    }
})

});

【问题讨论】：

标签： jquery highcharts

【解决方案1】：

您的示例：http://jsfiddle.net/S3j35/

使用e.point.name 确定单击了哪个点以及您需要从服务器获得哪些数据。当 AJAX 出现时，只需添加新数据系列即可：

            drilldown: function (e) {
                if (!e.seriesOptions) {
                    // e.point.name is info which bar was clicked
                    chart.showLoading('Simulating Ajax ...');
                    $.get("path/to/place.html?name=" + e.point.name, function(data) {
                        /***
                        where data is this format:
                        data = {
                            name: 'Cars',
                            data: [
                                ['Toyota', 1],
                                ['Volkswagen', 2],
                                ['Opel', 5]
                            ]
                        }
                        ***/
                        chart.hideLoading();
                        chart.addSeriesAsDrilldown(e.point, data);
                    });
                }
            }

【讨论】：

感谢 Pawel 的回复，我尝试了您的建议，但是从服务器获取数据后没有任何反应，我认为从服务器返回的数据未按预期格式化？我从 asmx webservice 获得的数据就像[{"__type":"WIS._HighChartDDRow","name":"Cars","data":[{"name":"Toyota","y":1},{"name":"Volkswagen","y":2},{"name":"Opel ","y":5}]}]
嗨 Pawel，我正在尝试从 c# 获取您建议的格式 { name: 'Cars', data: [ ['Toyota', 1], ['Volkswagen', 2], ['Opel', 5] ] } 的数据，您能帮我如何在服务器上构建我的类以获得此结果
嗨@alhashmiya，您是如何获得向下钻取格式的数据的，请您解释一下。例如{ 名称：'汽车'，数据：[ ['Toyota', 1], ['Volkswagen', 2], ['Opel', 5] ] }
@KannanK - 这取决于您的后端。如果是 nodejs，只需返回该 JSON。如果是其他语言，则使用内置方法生成 JSON。
@alhashmiya 谢谢

【解决方案2】：

下面是带有 ajax 的向下钻取级别的工作代码：

<script type="text/javascript">
    // Create the chart
    Highcharts.chart('container', {
        chart: {
            type: 'column',
            events: {
                drilldown: function (e) {
                    if (!e.seriesOptions) {

                        var chart = this;
                            //calling ajax to load the drill down levels
                            chart.showLoading('Simulating Ajax ...');
                            $.get("ajax_response.php?name=" + e.point.name, function(data) {
                                chart.hideLoading();
                                chart.addSeriesAsDrilldown(e.point, jQuery.parseJSON(data));
                            });
                    }

                }
            }
        },
        title: {
            text: 'Async drilldown'
        },
        xAxis: {
            type: 'category'
        },

        legend: {
            enabled: false
        },

        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true
                }
            }
        },

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

        drilldown: {
            series: []
        }
    });

</script>
<!-- language: lang-html -->

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/drilldown.js"></script>

    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>




<!-- end snippet -->


Create ajax_response.php with below codes:

<?php
if($_REQUEST['name'] == "Cars") {
$response = array('name' => 'Cars', 'data'=>array(array('Toyota', 1), array('Volkswagen', 2), array('Opel', 5)));
}else if($_REQUEST['name'] == "Fruits"){
    $response = array('name' => 'Fruits', 'data'=>array(array('Apples', 5), array('Oranges', 7), array('Bananas', 2))); 
}else if($_REQUEST['name'] == "Animals"){
    $response = array('name' => 'Animals', 'data'=>array(array('Cows', 2), array('Sheep', 3))); 
}

echo json_encode($response);
?>

【讨论】：