HighChart中的系列数据

时间:2013-11-11 15:10:02

标签: javascript jquery highcharts

我需要一些帮助来转换下面的代码,以便根据从DB返回的值构建系列数据。

var options = {
"chart": {
    "type": "column",
    "zoomType": "xy",
    "inverted": true
},
"plotOptions": {
    "series": {
        "stacking": "percent"
    },
    "column": {
        "allowPointSelect": true
    },
    "bar": {
        "selected": true
    }
},
"title": {
    "text": "MT Messages"
},
"xAxis": {
    "title": {
        "text": null
    },
    "type": "category"
},
"series": [
    {
        "index": 0,
        "dataLabels": {
            "enabled": true
        },
        "name": 101,
        "data": [
            [
                "Today",
                5
            ],
            [
                "This Week",
                3
            ],
            [
                "Last Week",
                4
            ],
            [
                "Last Month",
                127
            ]
        ]
    },
    {
        "index": 1,
        "dataLabels": {
            "enabled": true
        },
        "name": 103,
        "data": [
            [
                "Today",
                2
            ],
            [
                "This Week",
                2
            ],
            [
                "Last Week",
                3
            ],
            [
                "Last Month",
                20000
            ]
        ]
    },
    {
        "index": 2,
        "dataLabels": {
            "enabled": true
        },
        "name": 202,
        "data": [
            [
                "Today",
                3
            ],
            [
                "This Week",
                4
            ],
            [
                "Last Week",
                4
            ],
            [
                "Last Month",
                2
            ]
        ]
    }
]

};

我将其替换为:

 var data = [['Today', 12], ["This Week", 13], ["Last Week", 23], ["Last Month", 100]];

            var barChart = $(function() {
                $('#barChart').highcharts({
                    "chart": {
                        "type": "column",
                        "zoomType": "y",
                        "inverted": false
                    },
                    "plotOptions": {
                        "series": {
                            "stacking": "percent"
                        },
                        "column": {
                            "allowPointSelect": true
                        },
                        "bar": {
                            "selected": true
                        }
                    },
                    "title": {
                        "text": "MT Messages"
                    },
                    "xAxis": {
                        "title": {
                            "text": null
                        },
                        "type": "category"
                    },

                    "series": [
                        {
                            "index": 0,
                            "dataLabels": {
                                "enabled": true
                            },
                            "name": 101,
                            "data":data

                        },
                        {
                            "index": 1,
                            "dataLabels": {
                                "enabled": true
                            },
                            "name": 103,
                            "data": data
                        },
                        {
                            "index": 2,
                            "dataLabels": {
                                "enabled": true
                            },
                            "name": 202,
                            "data":data
                        }
                    ]
                });
            });

但是,我的所有列都包含每个索引的相同值

HighCharts

我可能会看到这一切都错了,也许我的阵列需要像:

data = ['今天',12,13,52],['本周',123,3466,56] ......等等

但是根本无法渲染图表。

1 个答案:

答案 0 :(得分:2)

您为每个系列使用相同的数据数组值,这就是它们看起来相同的原因。我是你的第一个例子,每个系列都有一组不同的数据。要在第二个中执行此操作,您应为每个系列使用不同的数据数组:

var data1 = [['Today', 12], ["This Week", 13], ["Last Week", 23], ["Last Month", 100]];
var data2 = [['Today', 5], ["This Week", 15], ["Last Week", 12], ["Last Month", 203]];
...
                "series": [
                    {
                        "index": 0,
                        "dataLabels": {
                            "enabled": true
                        },
                        "name": 101,
                        "data":data1

                    },
                    {
                        "index": 1,
                        "dataLabels": {
                            "enabled": true
                        },
                        "name": 103,
                        "data": data2
                    },
etc.