在 Highcharts 中使用 JSON 文件

Question

我有一系列的高温和低温，我想用 Highcharts 显示在列范围图表中。

我特别想要像演示示例中所示的图表：http://www.highcharts.com/stock/demo/columnrange

我已将我的数据放在一个名为 datatest.json 的文件中，其中包含以下文本：

[
[1230771600000, -5.8, 10.1],
[1230858000000, -4.1, 1.4],
[1230944400000, -0.5, 4.1],
[1231030800000, -8.9, -0.7],
[1231117200000, -9.7, -3.7],
[1231203600000, -3.4, 3.2],
[1231290000000, -3.9, -0.2],
[1231376400000, -2.4, 6.7],
[1231462800000, 3.8, 6.9],
[1262221200000, -12.2, -6.5]
]

当我从文件加载数据时，它没有给我图表。例如，用这个：

$(function () {

    $.getJSON('data/datatest.json', function (data) {

        $('#container').highcharts('StockChart', {

            chart: {
                type: 'columnrange'
            },

            rangeSelector: {
                selected: 2
            },

            title: {
                text: 'Temperature variation by day'
            },

            tooltip: {
                valueSuffix: '°C'
            },

            series: [{
                name: 'Temperatures',
                data: data
            }]

        });
    });

});

但是如果我将数据直接放入我的代码中（如下所示），它确实会按我的预期显示图表：

$(function () {

        $('#container').highcharts('StockChart', {

            chart: {
                type: 'columnrange'
            },

            rangeSelector: {
                selected: 2
            },

            title: {
                text: 'Temperature variation by day'
            },

            tooltip: {
                valueSuffix: '°C'
            },

            series: [{
                name: 'Temperatures',
                data: [
[1230771600000, -5.8, 10.1],
[1230858000000, -4.1, 1.4],
[1230944400000, -0.5, 4.1],
[1231030800000, -8.9, -0.7],
[1231117200000, -9.7, -3.7],
[1231203600000, -3.4, 3.2],
[1231290000000, -3.9, -0.2],
[1231376400000, -2.4, 6.7],
[1231462800000, 3.8, 6.9],
[1262221200000, -12.2, -6.5]
]
            }]

        });

});

我认为我的数据文件中的数据格式不正确，或者我没有以正确的方式从文件中读取数据。

任何帮助我走上正轨的建议或指导将不胜感激。

Answer 1

感谢@SebastianBochan 让我注意到我的 JSON 无效这一事实。

这里是正确格式 JSON 的缩略片段：

{
"data":
[
[1420640460000,36.7,37.25],
[1420640520000,37.19,37.74],
[1420640580000,37.74,38.6],
[1420640640000,38.72,39.33],
[1420640700000,39.33,39.51]
]
}

我使用了 JSON 验证器：http://jsonformatter.curiousconcept.com/

不管我叫它"data"还是"temperature"它只需要是一个字符串，然后当我引用它的时候，我需要确保引用它作为data.data。如果我将其命名为 "temperature"，那么它将是 data.temperature。无论如何，这里有一些代码：

    series: [{
        data: data.data
    }]

在 Highcharts 中使用 JSON 文件

Using JSON file in Highcharts

javascript

jquery

json

highcharts