Преобразовать массив объектов в другой вид

#javascript #json #highcharts

Есть такой массив объектов:

[ 
    {
        "year" : "1959",
        "data" : {
            "Яблоки" : 2794966,
            "Грушы" : 3974229,
            "Арбузы" : 762131,
            ...
        }
    }, 
    {
        "year" : "1970",
        "data" : {
            "Яблоки" : 4238395,
            "Грушы" : 5521917,
            "Арбузы" : 933461,
            ...
        }
    },
    ...
]


Как преобразовать его в такой вид:

{
    labels: ['1959', '1970', ...],
    datasets: [
        {
            label: 'Яблоки',
            data: [2794966, 4238395, ...]
        },
        {
            label: 'Грушы',
            data: [3974229, 5521917, ...]
        },
        {
            label: 'Арбузы',
            data: [762131, 933461, ...]
        },
        ...
    ]
}

    

Ответы

Ответ 1

Собираете года в один массив, фрукты в другой, типа:

var years = [];
var fruits = {};


Заполняете данными, примерно так:

for(var i=0; i < data.length; i++) {
    years.push(data[i]['year']);

    for(var fruit in data[i]['data']) {
        if(fruits[fruit] == undefined) {
            fruits[fruit] = [];
        }

        fruits[fruit].push(data[i]['data'][fruit]);
    }
}


И потом стоите массив так, как вам нужно:

var data = {};
data['labels'] = years;
data['datasets'] = [];

for(var fruit in fruits) {
    data['datasets'].push({
        'label': fruit,
        'data': fruits[fruit]
    });
}


Ответ 2

Просто берёте и меняете структуру. Например, так:



const initial = [ 
    {
        "year" : "1959",
        "data" : {
            "Яблоки" : 2794966,
            "Грушы" : 3974229,
            "Арбузы" : 762131
        }
    }, 
    {
        "year" : "1970",
        "data" : {
            "Яблоки" : 4238395,
            "Грушы" : 5521917,
            "Арбузы" : 933461
        }
    }
];

const data = {
  labels: initial.map(item => item.year),
  datasets: []
};
for (let l in initial[0].data) {
  data.datasets.push({
    label: l, 
    data: initial.map(item => item.data[l])
  });
}

console.log(data);

Highcharts разные цвета для линии графика

Есть ли способ в js библиотеке Highcharts установить разные цвета для одного графика? Чтобы линия с отрицательным значением была одного цвета, а та же линия с положительным значением - другого?
UPD
Вот так строю сам график
new Highcharts.Chart({ "chart":{ "renderTo":"chart1", "height":200, "width":300 }, "xAxis":{ "type":"datetime", "title":false, "dateTimeLabelFormats":{"day":"%e.%m"} }, "series":[{ "data":[{ "x":1515184552000,"y":3.62,"color":"#ff0000", ... }], }], "tooltip":{"enabled":false}, "legend":{"enabled":false} });
Получается вот такой график

Нужно чтобы линия ниже нуля была другим цветом. Как видно из кода, пробую в массив data передавать color, но при этом меняется только цвет точки при наведении на график, а не сама линия графика.

Ответ

Ответ, наверное, уже не актуален, но тем не менее.
Используйте свойство negativeColor серии
Highcharts.chart('container', { series: [ { name: 'test', data: [-1, 1, 2, -1, -2, 0, 1, 1], color: "red", negativeColor: "blue", }, ], }); #container { min-width: 310px; max-width: 800px; height: 200px; margin: 0 auto }