Javascript Highcharts/HighStock-如何正确解析JSON

我正在尝试将其用于我的数据。这是他们工作的地方

因此，我有多个REST端点以以下格式返回JSON（时间戳和小数的集合）：

在HighStock示例中，目的是在创建图表之前循环端点并引入JSON

为了让HighStock正确阅读，我意识到我需要将其映射到以下内容：

[[timestamp, 1.23], [timestamp, 1.24] ...]

我在计算如何在每个系列的JSON格式和正确呈现图表所需格式之间进行映射时遇到了一个问题，因此我目前得到的是一个空白图表

我的JS看起来像这样：

$(function () {
    var seriesOptions = [],
        seriesCounter = 0,
        names = ['P', 'Q', 'V', 'Q_C'],
        // create the chart when all data is loaded
        createChart = function () {

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

                rangeSelector: {
                    selected: 4
                },

                yAxis: {
                    labels: {
                        formatter: function () {
                            return (this.value > 0 ? ' + ' : '') + this.value + '%';
                        }
                    },
                    plotLines: [{
                        value: 0,
                        width: 2,
                        color: 'silver'
                    }]
                },

                plotOptions: {
                    series: {
                        compare: 'percent'
                    }
                },

                tooltip: {
                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                    valueDecimals: 2
                },

                series: seriesOptions
            });
        };

    $.each(names, function (i, name) {

        $.getJSON('/live/data/' + name.toLowerCase(), function (data) {

            seriesOptions[i] = {
                name: name,
                data: data['data']
            };

            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
            seriesCounter += 1;

            if (seriesCounter === names.length) {
                createChart();
            }
        });
    });
});

$（函数（）{
var系列选项=[]，
序列计数器=0，
名称=['P'，'Q'，'V'，'Q_C']，
//在加载所有数据时创建图表
createChart=函数（）{
$（'图表4'）。高图（'股票图表'{
范围选择器：{
选定：4
},
亚克斯：{
标签：{
格式化程序：函数（）{
返回（this.value>0？'+'：''）+this.value+'%；
}
},
绘图线：[{
值：0，
宽度：2，
颜色：“银色”
}]
},
打印选项：{
系列：{
比较：“百分比”
}
},
工具提示：{
pointFormat:“{series.name}:{point.y}（{point.change}%）
”，
数值小数：2
},
系列：系列选项
});
};
$.each（名称、函数（i、名称）{
$.getJSON（'/live/data/'+name.toLowerCase（），函数（数据）{
系列选项[i]={
姓名:姓名,，
数据：数据['data']
};
//当我们异步加载数据时，我们不知道数据的到达顺序
//我们保留一个计数器，并在加载所有数据时创建图表。
序列计数器+=1；
if（serieCounter==names.length）{
createChart（）；
}
});
});
});

任何帮助都将不胜感激

谢谢，

---

休。

您正在传递一个经典的

对象，而不是
系列选项[i]中的
数组。你应该做：

$.each(names, function (i, name) {

        $.getJSON('/live/data/' + name.toLowerCase(), function (data) {

            var data_tmp = [];

            Object.keys(data["data"]).forEach(function (key) {
                data_tmp.push([parseInt(key), data["data"][key]]);
            });

            seriesOptions[i] = {
                name: name,
                data: data_tmp
            };

            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
            seriesCounter += 1;

            if (seriesCounter === names.length) {
                createChart();
            }
        });
    });

您正在传递一个经典的
对象，而不是
系列选项[i]中的
数组。你应该做：

$.each(names, function (i, name) {

        $.getJSON('/live/data/' + name.toLowerCase(), function (data) {

            var data_tmp = [];

            Object.keys(data["data"]).forEach(function (key) {
                data_tmp.push([parseInt(key), data["data"][key]]);
            });

            seriesOptions[i] = {
                name: name,
                data: data_tmp
            };

            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
            seriesCounter += 1;

            if (seriesCounter === names.length) {
                createChart();
            }
        });
    });

嗨，谢谢你的建议。我如上所述更新了代码，但我仍然只是得到一个空白图表。我可以看到您建议的逻辑，我感谢您的帮助，但由于某种原因，它没有发生（空白图表）。再次您好：）当我在Chrome中调试时，我可以看到forEach循环只执行一次，并且key=“data”。这看起来是个问题，数据对象是否可以嵌套，因此我需要以某种方式更深一层？我看到了问题所在。请参见编辑。您需要通过
数据[“data”]
而不是
数据进行循环。您好，谢谢您的建议。我如上所述更新了代码，但我仍然只是得到一个空白图表。我可以看到您建议的逻辑，我感谢您的帮助，但由于某种原因，它没有发生（空白图表）。再次您好：）当我在Chrome中调试时，我可以看到forEach循环只执行一次，并且key=“data”。这看起来是个问题，数据对象是否可以嵌套，因此我需要以某种方式更深一层？我看到了问题所在。请参见编辑。您需要通过
data[“data”]
而不是
data
进行循环。