Highcharts列钻取

Question

从我的php文件中，我的数组打印出这样的内容：

Array
(
[2011] => Array
    (
        [name] => 2011
        [total] => 963
        [drilldown] => true
    )

[2012] => Array
    (
        [name] => 2012
        [total] => 1997
        [drilldown] => true
    )

[2013] => Array
    (
        [name] => 2013
        [total] => 1188
        [drilldown] => true
    )

）

这是json_encode：

{"2011":{"name":2011,"total":963,"drilldown":"true"},
"2012":{"name":2012,"total":1997,"drilldown":"true"},
"2013":{"name":2013,"total":1188,"drilldown":"true"}}

来自此工作链接：highcharts/drilldown

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

我想用我的json改变这部分。

Answer 1

我做了JSFIDDLE demo。

你需要做的是将json编码的PHP数组字符串分配给一个javascript变量，如下所示：

var my_data = <?php echo json_encode($php_array); ?>

对此变量my_data将具有如下值：

var my_data = {
        "2011":{"name":2011,"total":963,"drilldown":"true"},
        "2012":{"name":2012,"total":1997,"drilldown":"true"},
        "2013":{"name":2013,"total":1188,"drilldown":"true"}
    };

现在需要将此对象结构化为格式，以便highcharts可以将其用作绘制图形值的数据源。可以这样做：

var data_array = [];
$.each(my_data, function(key, value){

        var total_value = value.total;
        delete value.total;//remove the attribute total
        value.y = total_value;//add a new attribute "y" for plotting values on y-axis
        data_array.push(value);
    });

此后data_array将具有如下结构：

data_array = [
        {"name":2011,"y":963,"drilldown":"true"},//note we have removed attribute "total" with "y"
        {"name":2012,"y":1997,"drilldown":"true"},
        {"name":2013,"y":1188,"drilldown":"true"}
    ];

现在这个data_array可以作为数据源传递给图表，同时初始化如下：

// Create the chart
    $('#container').highcharts({
....
.....
series: [{
            name: 'Things',
            colorByPoint: true,
            data:data_array//put the data_array here
....
..

你完成了！

以下是完整的代码：

$(function () {    
    var data_array = [];
    //assign the json encoded string of PHP array here like:
    //var my_data = <?php echo json_encode($php_array); ?>
    var my_data = {
        "2011":{"name":2011,"total":963,"drilldown":"true"},
        "2012":{"name":2012,"total":1997,"drilldown":"true"},
        "2013":{"name":2013,"total":1188,"drilldown":"true"}
    };

    $.each(my_data, function(key, value){
        //console.log("key = "+key);
        //console.log("value=");
        //console.log(value);
        var total_value = value.total;
        delete value.total;//remove the attribute total
        value.y = total_value;//add a new attribute "y" for plotting values on y-axis
        data_array.push(value);
    });

    //console.log("data_array = ");
    //console.log(data_array);


    // 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:data_array

        }],

        drilldown: {
            series: []
        }
    })
});