javascript - 使用对象数组填充 Highcharts 线

Question

我正在使用 highchart js 创建折线图。我正在使用 php 进行 json 响应。问题是，当我根据响应填充图表时，会显示年份，但不会绘制线条。

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: 'resp_highChart.php',
        dataType: "json",
        contentType: "application/json",
        success: function (response) {
            console.log(response);
            // draw chart
            $('#container').highcharts({
                chart: {
                type: 'line'
            },
            title: {
                text: 'Year Wise Sales Data'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr']
            },
            yAxis: {
                title: {
                    text: 'Sold Value'
                },
                labels: {
                    formatter: function () {
                        return this.value + '';
                    }
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: false
                    },
                    enableMouseTracking: true
                }
            },
                series: response
            });

        }


    });

});

我的回复格式如下

[{"name":"2012","data":"[692101643,716334837,776991835,769420169 ]"},{"name":"2013","data":"[860859252,825852169,895524501,892930333 ]"}]

Answer 1

这里的问题是您的数据值被读取为字符串而不是数组。

我使用您的图表选项和直接插入的 JSON 数据创建了一个示例 fiddle :http://jsfiddle.net/brightmatrix/143bzv1s/

图表可以正确使用以下格式。请注意，数据数组周围没有引号。

series: [
    {"name":"2012","data":[692101643,716334837,776991835,769420169 ]},
    {"name":"2013","data":[860859252,825852169,895524501,892930333 ]}
]

希望这对您有帮助!

此外，非常感谢您在问题中包含示例数据。这非常有帮助。