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

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


});

});

---

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

有几个问题：

您已将数字数据存储为字符串。在试图找到解决方案时，我不得不将

“

”从温度和风速值中去掉，否则我会

您有两个数据系列，但您只在

options.series

中创建了一个对象。您应该创建两个系列对象并将它们添加到

options.series

数组中

对于第二个系列，必须指定要使用的y轴。在本例中，

yAxis==1

第二个y轴的最大值太低，无法显示数据

下面是一个展示上述内容的示例：

由于您在评论中提到无法更改正在获取的数据的格式，因此您需要在收到数据后更正格式。以下函数应正确执行此操作（尽管我不保证）：

---

有几个问题：

您已将数字数据存储为字符串。在试图找到解决方案时，我必须将

“

从温度和风速值中去掉，否则我将

您有两个数据系列，但在

options.series

中仅创建一个对象。您应该创建两个series对象并将它们添加到

options.series

数组中

对于第二个系列，必须指定要使用的y轴。在这种情况下，

yAxis==1

第二个y轴的最大值太低，无法显示数据

下面是一个展示上述内容的示例：

由于您在评论中提到无法更改正在获取的数据的格式，因此需要在收到数据后更正格式。下面的函数应该正确地做到这一点（尽管我不保证）：

---

有几个问题：

您已将数字数据存储为字符串。在试图找到解决方案时，我不得不将

“

”从温度和风速值中去掉，否则我会

您有两个数据系列，但您只在

options.series

中创建了一个对象。您应该创建两个系列对象并将它们添加到

options.series

数组中

对于第二个系列，必须指定要使用的y轴。在本例中，

yAxis==1

第二个y轴的最大值太低，无法显示数据

下面是一个展示上述内容的示例：

由于您在评论中提到无法更改正在获取的数据的格式，因此您需要在收到数据后更正格式。以下函数应正确执行此操作（尽管我不保证）：

---

有几个问题：

您已将数字数据存储为字符串。在试图找到解决方案时，我必须将

“

从温度和风速值中去掉，否则我将

您有两个数据系列，但在

options.series

中仅创建一个对象。您应该创建两个series对象并将它们添加到

options.series

数组中

对于第二个系列，必须指定要使用的y轴。在这种情况下，

yAxis==1

第二个y轴的最大值太低，无法显示数据

下面是一个展示上述内容的示例：

由于您在评论中提到无法更改正在获取的数据的格式，因此需要在收到数据后更正格式。下面的函数应该正确地做到这一点（尽管我不保证）：

---

---

您是否使用任何类型的web服务器托管文件？控制台出错？是的，从我的服务器加载文件，因此ACCES-CONTROL-ALLOW-ORIGN没有问题。控制台中没有错误。文件日期已正确捕获。您是否使用任何类型的web服务器托管文件？控制台出错？是的，从我的服务器加载文件，因此ACCES-CONTROL-ALLOW-ORIGN没有问题。控制台中没有错误。文件日期已正确捕获。您是否使用任何类型的web服务器托管文件？控制台出错？是的，从我的服务器加载文件，因此ACCES-CONTROL-ALLOW-ORIGN没有问题。控制台中没有错误。文件日期已正确捕获。您是否使用任何类型的web服务器托管文件？控制台出错？是的，从我的服务器加载文件，因此ACCES-CONTROL-ALLOW-ORIGN没有问题。控制台中没有错误。已正确捕获文件日期。感谢您的反馈。不幸的是，进一步的文件将无法正确加载。在代码json下面：代码：`series:[{data:[]}，{yAxis:1，//这意味着第二个yAxis将用于绘制此系列数据：[]}；$。getJSON（'test/test.json'，函数（数据）{options.series[0]。数据=data；options.series[1]。数据=data；图表=new Highcharts.chart（options）；}）`您已经将

options.series[0]

和

options.series[1]

设置为

data

。您应该将第一个设置为

data[0]

，第二个设置为

data[1]

@Sebastiano除了我上面的评论之外，您从中获取JSON数据的页面仍然将数值存储为字符串（参见我上面提到的问题1）。在代码运行之前，您需要更正上面的所有问题。不，我不知道如何将数字数据改进为字符串。我没有机会改进jsonfile@Sebastiano我用两段新代码编辑了我的答案，以解决格式问题。我希望这会有帮助。谢谢你的反馈。不幸的是，进一步的文件将无法正确加载。代码json下面：代码：`series:[{d

$(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];
});