高级图表/ HighStock -如何正确解析JSON

Question

我正在尝试修改这个高架海图实例，以便与我的数据一起使用。这里是他们在JSFiddle工作的地方。

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

{
  "data" : {
    "1440151410002" : 0.00430013850798903,
    "1440151420001" : 0.00403626002690655,
    "1440151430002" : 0.00376276477784804,
    "1440151440001" : 0.00381307106855453,
    "1440151450002" : 0.0039385712356139,
    "1440151460002" : 0.0038632842565838,
    "1440151470002" : 0.00407696207243675,
    "1440151480002" : 0.0042298508094211,
    "1440151490002" : 0.00411973200243665,
    "1440151500002" : 0.00360435516702981,
    "1440151510001" : 0.00426992197206649,
    "1440151520002" : 0.00354089360750537,
    "1440151530002" : 0.00400806659263663
  }
}

就像在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();
            }
        });
    });
});

任何帮助都将不胜感激！

谢了休。

Answer 1

您正在传递一个经典的Object，而不是seriesOptions[i].data中的一个array。你应该这样做：

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