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

Question

我正在尝试调整这个Highstock chart example与我的数据一起使用。这是他们在 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

您在 seriesOptions[i].data 中传递一个经典的Object，而不是一个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();
            }
        });
    });