Highcharts / HighStock - Как правильно парсить JSON

Я пытаюсь адаптировать этот пример диаграммы Highstock для использования с моими данными. Вот их работа в 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();
            }
        });
    });
});

Любая помощь будет оценена по достоинству!

Спасибо, Хью.


javascript json highcharts
person Hugh Lacey    schedule 24.08.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы передаете классический Object вместо array в seriesOptions[i].data. Ты должен сделать:

$.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();
            }
        });
    });
person Kabulan0lak    schedule 24.08.2015
comment
Привет, спасибо за предложение. Я обновил код, как указано выше, но у меня все еще просто отображается пустая диаграмма. - person Hugh Lacey; 24.08.2015
comment
Я вижу логику в том, что вы предложили, и я ценю помощь, но по какой-то причине этого не происходит (пустая диаграмма). - person Hugh Lacey; 24.08.2015
comment
Еще раз привет :) когда я отлаживаю в Chrome, я вижу, что цикл forEach выполняется только один раз и ключ = данные. Это выглядит проблемой, может ли объект данных быть вложенным, поэтому мне нужно как-то углубиться на один уровень? - person Hugh Lacey; 24.08.2015
comment
Я вижу, что не так. Смотрите редактирование. Вам нужно пройти через data["data"] вместо data. - person Kabulan0lak; 24.08.2015