Детализация столбца Highcharts

Я сделал демонстрацию JSFIDDLE.

Что вам нужно сделать, так это присвоить закодированную 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: []
        }
    })
});