Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/387.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript HighChart动态向下钻取_Javascript_Jquery_Highcharts - Fatal编程技术网

Javascript HighChart动态向下钻取

Javascript HighChart动态向下钻取,javascript,jquery,highcharts,Javascript,Jquery,Highcharts,我已经创建了一个图表,使用fiddle上给出的示例进行深入分析 当我点击第一级时,它通过使用成功地为下一级添加图表 chart.addSeriesAsDrilldown(e.point, series); 我的问题是,现在我想新添加的图表也有向下钻取。我不知道如何做到这一点。任何帮助都是感激的 我找到了解决这个问题的办法。事实上,当数据作为json从web服务中获取用于下一级深入分析时,我必须确保属性深入分析需要设置为true,这是我之前在进行一些研究后发现的。我在下面给出了一些json格

我已经创建了一个图表,使用fiddle上给出的示例进行深入分析

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

 chart.addSeriesAsDrilldown(e.point, series);
我的问题是,现在我想新添加的图表也有向下钻取。我不知道如何做到这一点。任何帮助都是感激的


我找到了解决这个问题的办法。事实上,当数据作为json从web服务中获取用于下一级深入分析时,我必须确保属性深入分析需要设置为true,这是我之前在进行一些研究后发现的。我在下面给出了一些json格式的数据,并参考了fiddle上的示例

单击第一级时,我将转到web服务并获取数据

  "{\"name\":\"Animals\",\"data\": [[\"Cows\", 2],[\"Sheep\", 3]],\"drilldown\": true}"
未启用下一级别的向下钻取。为了允许进一步向下钻取,我必须修改上述数据,如下所示,在中,我添加了属性向下钻取,使其为true

  (name == "Animals") resp = "{\"name\":\"Animals\",\"data\": [{\"name\":\"Cows\", \"y\": 2, \"drilldown\": \"true\"},{\"name\":\"Sheep\",\"y\": 3,\"drilldown\":\"true\"}]}";
就这些,似乎很简单:) 如果我有时间,我会尝试在小提琴上创建样本,如果这样做,我会更新链接

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