HighChart动态向下钻取

HighChart dynamic drill down

本文关键字：钻取 动态 HighChart      更新时间：2023-09-26

我使用fiddle 上给出的样本创建了一个具有向下钻取功能的图表

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/async/

当我点击第一级时，它通过使用成功地添加了下一级的图表

 chart.addSeriesAsDrilldown(e.point, series);

我的问题是，现在我想新添加的图表也有向下钻取。我不知道如何做到这一点。任何帮助都会心存感激。

问候

我找到了解决方案。事实上，当数据以json的形式从web服务获取以进行下一级的向下钻取时，我必须确保属性drilldown需要设置为true，这是我在经过一些研究后发现的。我在下面参考fiddle上的示例给出了一些json格式的数据。

当第一个级别被点击时，我要去web服务并以的形式获取数据

  "{'"name'":'"Animals'",'"data'": [['"Cows'", 2],['"Sheep'", 3]],'"drilldown'": true}"

这不允许向下钻取下一个级别。为了允许进一步深入，我不得不修改上面的数据如下，其中我添加了属性深入，使其成为真正的

  (name == "Animals") resp = "{'"name'":'"Animals'",'"data'": [{'"name'":'"Cows'", '"y'": 2, '"drilldown'": '"true'"},{'"name'":'"Sheep'",'"y'": 3,'"drilldown'":'"true'"}]}";

仅此而已，似乎很简单：(如果我有时间的话，我会尝试在Fiddle上创建样本，如果这样做了，我会更新链接。

$(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: [
                                    {
                                    name: 'Toyota',
                                    y: 4,
                                    drilldown: true
                                    },
                                    ['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: []
    }
})

})；

相关文章：