Базовая диаграмма High Series для нескольких серий с использованием JSON

Question

Я пытаюсь создать базовую линейную диаграмму, которая содержит три серии данных в файле json. Файл json для этого примера называется json.json. Я проверил формат JSON, используя JSON Formatter .

Пример формата JSON

{
"Series1 (Units1)": [100 ,200 ,300],
"Series2 (Units2)": [10, 20, 30],
"Series3 (Units3)": [1, 2, 3]
}

Используемый текущий код из другого примера, который я нашел

$(function () {

    $.getJSON('data/json.json', function (data) {
        console.log(data)
        var processedData = [];
        Highcharts.each(data, function (d) {
            processedData.push(d.Series);
        });

        // Create the chart
        $('#container').highcharts('StockChart', {
            rangeSelector: {
                selected: 1
            },
            title: {
                text: 'Series'
            },

            series: [{
                data: processedData
            }]

        });
    });

});

Я смоделировал пример диаграммы, которую я пытаюсь достичь, используя JSFiddle .

Я также пытался следовать этому JSFiddle из другого поста, но данные JSON не будут загружаться при попытке его изменить.

Я проверил, что данные выбираются, добавив строку console.log(data)

Как я могу получить данные для загрузки в диаграмму, используя этот формат?

Answer 1

Вы должны преобразовать JSON из key: value в правильный формат серии, который в вашем случае выглядит примерно так:

[{ 
    name: 'my series', 
    data: [1,2,3] 
}, ...];

В настоящее время ваше processedData форматирование неверно, поэтому конечный результат, помещенный в Highcharts series, недействителен.

Короче говоря, ваши события GET, обработка и отображение могут выглядеть примерно так ( CodePen ):

$(function () {
    $.getJSON('https://api.myjson.com/bins/yu6gq', function (data) {
        var processedData = [];

        for(var entry in data) {
            processedData.push({
              name: entry,
              data: data[entry]
            });
        }

        // Create the chart
        $('#container').highcharts('StockChart', {
            series: processedData
        });
    });
});

По-прежнему остается задача создания правильного массива processedData, содержащего Series объекты с правильным форматом. В этом примере каждому Series присваиваются атрибуты name и data, заполненные значениями из вашего JSON.