javascript - HighChart 中的系列数据

Question

我需要一些帮助将以下代码转换为根据从数据库返回的值构建的系列数据。

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

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

我可能看错了，也许我的数组需要类似于:

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

但这根本无法渲染图表。

Answer 1

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

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.