Javascript Highcharts列向下展开

从我的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_编码：

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

从该工作链接：

我想用我的json更改这个部分

我做了一个决定

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

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

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);
    });

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

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

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

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);
    });

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

在此之后，

数据\u数组

将具有如下结构：

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"}
    ];

现在这个

数据\u数组可以作为数据源传递给图表，初始化过程如下：

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

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);
    });

// 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: []
        }
    })
});

$（函数（）{
var数据_数组=[]；
//在此处指定PHP数组的json编码字符串，如下所示：
//变量my_数据=
变量my_数据={
“2011”：{“name”：2011，“total”：963，“drilldown”：“true”}，
“2012”：{“名称”：2012，“总计”：1997，“向下展开”：“真实”}，
“2013”：{“name”：2013，“total”：1188，“drilldown”：“true”}
};
$.each（my_数据、函数（键、值）{
//console.log（“key=“+key”）；
//console.log（“value=”）；
//console.log（值）；
var total_value=value.total；
delete value.total；//删除属性total
value.y=total_value；//添加一个新属性“y”，用于在y轴上打印值
数据_array.push（值）；
});
//log（“data_array=”）；
//console.log（数据_数组）；
//创建图表
$（“#容器”）。高图({
图表：{
键入：“列”，
活动：{
向下展开：函数（e）{
如果（！e.系列选项）{
var图表=此，
深入调查={
“动物”：{
名称：“动物”，
数据：[
[Cows'，2]，
[‘绵羊’，3]
]
},
“水果”：{
名称：'水果'，
数据：[
[‘苹果’，5]，
[Oranges'，7]，
[‘香蕉’，2]
]
},
“汽车”：{
名称：“汽车”，
数据：[
[Toyota'，1]，
[Volkswagen'，2]，
[欧宝，5]
]
}
},
系列=钻取[e.point.name]；
//显示加载标签
showLoading（'simulationajax…'）；
setTimeout（函数（）{
chart.hideLoading（）；
图表.添加系列向下倾斜（e.点，系列）；
}, 1000);
}
}
}
},
标题：{
文本：“异步向下展开”
},
xAxis：{
类型：“类别”
},
图例：{
已启用：false
},
打印选项：{
系列：{
边框宽度：0，
数据标签：{
启用：对，
}
}
},
系列：[{
名称：'事物'，
colorByPoint：对，
数据：数据数组
}],
向下展开：{
系列：[]
}
})
});
很高兴能帮助您！希望你得到你想要的！：）是的。。一切都非常顺利。非常感谢你！