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

pushing dynamic data to stacked percentage column in highcharts

本文关键字：百分比 位图 数据 动态 高位图      更新时间：2023-09-26

我想使用堆叠百分比列绘制一些数据。但是数据是动态的，数据是通过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/

您可以从服务器端生成类别和序列数组。然后您的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
    })
相关文章：