javascript - 将动态数据推送到高图表中的堆叠百分比列

Question

我想使用堆叠百分比列绘制一些数据。但是数据是动态的，数据是通过ajax获取的。

这是其中一个 ajax 响应的示例-

X轴类别-

Array
(
    [ID0] => 2013/07/22
    [ID1] => 2013/07/23
    [ID2] => 2013/07/24
    [ID3] => 2013/07/25
)

系列数据和名称-

Array
(
    [0] => Array
        (
            [ID1] => 5
            [ID3] => 2
            [ID4] => 1
            [ID5] => 4
        )

    [1] => Array
        (
            [ID1] => 5
            [ID3] => 1
            [ID4] => 2
        )

    [2] => Array
        (
            [ID1] => 5
            [ID2] => 1
            [ID3] => 2
            [ID4] => 3
            [ID5] => 4
        )

    [3] => Array
        (
            [ID1] => 6
            [ID2] => 3
            [ID4] => 1
            [ID5] => 1
        )

)

这就是我想要的 - http://jsfiddle.net/NF9Yp/

Answer 1

您可以从服务器端生成类别和系列数组。然后你的ajax函数如下。jsondata 从服务器以 Json 格式返回。从 jsondata 的属性中设置选项类别和系列值。

        $.ajax({
        url: callbackUrl,            
        dataType: "json",
        async: true,
        cache: false,
        success: function (jsondata) {
var options = {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: jsondata.categories
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            }
        },
        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
            shared: true
        },
        plotOptions: {
            column: {
                stacking: 'percent'
            }
        },
            series: jsonData.series
    };
    $('#container').highcharts(options);
        },
        error: showAjaxError
    })