Question

我在加载.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);


});

});

如何正确地为数据类型编写它？

Answer 1

有一些问题：

您已将数字数据存储为字符串。在尝试寻找解决方案的同时，我不得不将"的温度和风速值除去，或者我得到Highcharts Error #14
您有两个数据系列，但您只在options.series中创建一个对象。您应该创建两个系列对象并将它们添加到options.series数组。
对于第二个系列，您必须指定要使用的y轴。在这种情况下yAxis == 1。
第二个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];
});

加载自定义json文件 - highcharts.js

1 个答案: