加载自定义 json 文件 - 高图表.js

Loading a custom json file - highcharts.js

本文关键字:高图表 js 文件 自定义 json 加载      更新时间:2023-09-26

我在加载 .json 文件时遇到问题:

[
    [
        [
            "2014-11-19 06:00:00",
            "1.1"
        ],
        [
            "2014-11-19 14:00:00",
            "4.9"
        ],
        [
            "2014-11-19 15:00:00",
            "4.9"
        ],
        [
            "2014-11-19 16:00:00",
            "4.9"
        ],
        [
            "2014-11-19 17:00:00",
            "4.9"
        ],
        [
            "2014-11-19 18:00:00",
            "4.9"
        ]
    ],
    [
        [
            "2014-11-13 23:00:00",
            "194"
        ],
        [
            "2014-11-14 00:00:00",
            "195"
        ],
        [
            "2014-11-14 01:00:00",
            "187"
        ],
        [
            "2014-11-14 02:00:00",
            "191"
        ],
        [
            "2014-11-14 03:00:00",
            "218"
        ],
        [
            "2014-11-14 04:00:00",
            "170"
        ]
    ]
]

值:

[[data, valueTemperature],[data,WindMax]]

我尝试过这种方式,但不起作用:

$(document).ready(function () {
 var options = {
    chart: {
        renderTo: 'container',
        type: 'spline',
        zoomType: 'xy'
    },
    title: {
        text: 'Temperatura'
    },
    subtitle: {
        text: '5 dni'
    },
    xAxis: {
        type: 'datetime',
    },

    yAxis: [{ // Primary yAxis
        labels: {
            format: '{value}°C',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        title: {
            text: 'Temperature',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        min: -25,
        max: 25,
    }, { // Secondary yAxis
        title: {
            text: 'Prędkość wiatru',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '{value} m/s',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        min: 0,
        max: 15,
        opposite: true
    }],
    tooltip: {
        shared: true
    },
    series: [{}]
};
var chart;
$.getJSON('test.json', function (data) {
    options.series[0].data = data;
    chart = new Highcharts.Chart(options);

});
});

如何正确编写数据类型?

有几个问题:

  1. 您已将数值数据存储为字符串。在尝试寻找解决方案时,我不得不从温度和风速值中删除",否则我会得到Highcharts错误#14
  2. 有两个数据系列,但您只在 options.series 中创建一个对象。您应该创建两个系列对象并将它们添加到options.series数组中。
  3. 对于第二个系列,必须指定要使用的 y 轴。在这种情况下yAxis == 1.
  4. 第二个 y 轴的最大值太低,无法显示数据。

下面是一个展示上述内容的示例: http://jsfiddle.net/6yvdkp20/1/

$(function () {
    var options = {
        chart: {
            renderTo: 'container',
            type: 'spline',
            zoomType: 'xy'
        },
        title: {
            text: 'Temperatura'
        },
        subtitle: {
            text: '5 dni'
        },
        xAxis: {
            type: 'datetime',
        },
        yAxis: [
            { // Primary yAxis
                labels: {
                    format: '{value}°C',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                title: {
                    text: 'Temperature',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                min: -25,
                max: 25,
            }, { // Secondary yAxis
                title: {
                    text: 'Prędkość wiatru',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                labels: {
                    format: '{value} m/s',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                min: 0,
                max: 200,
                opposite: true
            }
        ],
        tooltip: {
            shared: true
        },
        series: [
            {
                data: [
                    [
                        "2014-11-19 06:00:00",
                        1.1
                    ],
                    [
                        "2014-11-19 14:00:00",
                        4.9
                    ],
                    [
                        "2014-11-19 15:00:00",
                        4.9
                    ],
                    [
                        "2014-11-19 16:00:00",
                        4.9
                    ],
                    [
                        "2014-11-19 17:00:00",
                        4.9
                    ],
                    [
                        "2014-11-19 18:00:00",
                        4.9
                    ]
                ]
            },{
                yAxis: 1, // This means the second yAxis will be used to plot this series
                data:[
                    [
                        "2014-11-13 23:00:00",
                        194
                    ],
                    [
                        "2014-11-14 00:00:00",
                        195
                    ],
                    [
                        "2014-11-14 01:00:00",
                        187
                    ],
                    [
                        "2014-11-14 02:00:00",
                        191
                    ],
                    [
                        "2014-11-14 03:00:00",
                        218
                    ],
                    [
                        "2014-11-14 04:00:00",
                        170
                    ]
                ]
            }
        ]
    };
    $('#container').highcharts(options);
});

由于您在评论中提到无法更改要获取的数据的格式,因此您需要在收到数据后更正格式。以下函数应该可以正确执行此操作(尽管我不作任何保证):

function fixFormat(data) {
    for(var i = 0; i < dataSeries[0].length; ++i) {
        dataSeries[0][i][1] = parseFloat(dataSeries[0][i][1]);
    }
    for(var i = 0; i < dataSeries[1].length; ++i) {
        dataSeries[1][i][1] = parseInt(dataSeries[1][i][1]);
    }
}

用法:

$.getJSON('http://kamery.topr.pl/meteo/charts/moko.php', function (data) {
    // Correct the formatting
    fixFormat(data);
    // Put the data in the right place
    options.series[0].data = data[0];
    options.series[1].data = data[1];
});