Question

我正在尝试创建一个基本折线图，其中包含json文件中的三个数据系列。对于此示例，json文件名为json.json。我已使用JSON Formatter验证了JSON格式。

JSON格式示例

{
"Series1 (Units1)": [100 ,200 ,300],
"Series2 (Units2)": [10, 20, 30],
"Series3 (Units3)": [1, 2, 3]
}

使用的当前代码来自我找到的另一个例子

$(function () {

    $.getJSON('data/json.json', function (data) {
        console.log(data)
        var processedData = [];
        Highcharts.each(data, function (d) {
            processedData.push(d.Series);
        });

        // Create the chart
        $('#container').highcharts('StockChart', {
            rangeSelector: {
                selected: 1
            },
            title: {
                text: 'Series'
            },

            series: [{
                data: processedData
            }]

        });
    });

});

我已经使用JSFiddle模拟了我想要实现的图表示例。

我还尝试从另一篇文章中跟随此JSFiddle，但是当我尝试修改它时，JSON数据将无法加载。

我已经通过添加行console.log(data)

检查了数据是否被提取

如何使用此格式将数据加载到图表中？

Answer 1

您必须将JSON从key: value转换为正确的系列格式，在您的情况下类似于：

[{ 
    name: 'my series', 
    data: [1,2,3] 
}, ...];

目前您的processedData格式不正确，因此输入Highcharts series的最终结果无效。

简而言之，您的活动GET，流程和展示可能如下所示（CodePen）：

$(function () {
    $.getJSON('https://api.myjson.com/bins/yu6gq', function (data) {
        var processedData = [];

        for(var entry in data) {
            processedData.push({
              name: entry,
              data: data[entry]
            });
        }

        // Create the chart
        $('#container').highcharts('StockChart', {
            series: processedData
        });
    });
});

它仍然只是创建正确的processedData数组的任务，包含具有正确格式的Series个对象。在此示例中，每个Series都会获得name和data属性，并使用您的JSON中的值填充。

使用JSON

1 个答案: