Как правильно обработать объект для HighCharts (JavaScript, EcmaScript6)?

Question

[Валерий Молчанов]

Рисую с помощью HighCharts простой график, попробовать можно тут https://jsfiddle.net/j9zomL4w/
В частности, js код такой:

var compare = (a, b) => {
	return a.y > b.y ? 1 : (a.y < b.y ? -1 : 0);
};
var colors = Highcharts.getOptions().colors;
var options = {
  series: [{
    data: [
    	{y: 0},{y: 2},{y: 0},{y: 4},{y: 0},{y: 0},{y: 0},{y: 3},{y: 0}
    ].filter(o => o.y) // Filter 0 values
    	.map((o, i) => {o.color = colors[i]; return o}) // Add colors
      .sort(compare), // Sort
    type: 'bar'
  }]
};
var chart = Highcharts.chart('container',options);

.map, .filter, .sort отвечают за то, чтобы линии графики раскрашивались в разные цвета, не выводились, если пустые, и сортировались по возрастанию.
Как поправить код, чтобы он работал с таким объектом? :
Значения в 'data', это значения для каждого месяца, т.к. график строится по месяцам.

var obj = [
{
name: "name1",
data: [1,2,3,4,5,6,7,8,9,10,11,12]
},
{
name: "name2",
data: [12,11,10,9,8,7,6,5,4,3,2,1]
}];

...
// Что-то вроде такого:
series: [{
    data: obj.filter(o => o.y) // Filter 0 values
    	.map((o, i) => {o.color = colors[i]; return o}) // Add colors
      .sort(compare), // Sort
...

Comments

[Anton Bobylev]

name по оси ординат, data по оси абсцисс?

[Валерий Молчанов]

Да, прикрепил картинку для наглядности.

[Anton Bobylev]

Валерий Молчанов: смотрите этот пример www.highcharts.com/demo/combo

[Валерий Молчанов]

Не увидел в примере решения проблемы)

[Anton Bobylev]

Валерий Молчанов: ну тогда ¯\_(ツ)_/¯, у вас определенно серии данных, как размещать серии показано в примере. Как преобразовать ваши данные в серии - вопрос перебора существующих данных и формирования новых.

[Anton Bobylev]

Вот это ваш вариант? jsfiddle.net/gh/get/jquery/3.1.1/highslide-softwar... В чем именно у вас задача, в сортировке и сокрытии пустых значений?

[Валерий Молчанов]

Anton Bobylev: В сортировке и сокрытии пустых значений. Т.е. внутри месяца данные = 0 скрыть, а оставшиеся отсортировать.

Answer 1

[Валерий Молчанов]

Решение предложено на форуме поддержки Highcharts:

In order to achieve desired behaviour, you can create 2D array of your data, map it that every point should contain y value and color, then rotate your array and sort each row, then rotate it back and save to original series array last step would be mapping 0 values to null.

jsfiddle

// Initial data
var data = [
  [107, 131, 635, 203, 29, 152, 954, 420, 740, 38, 42, 156],
  [133, 50, 0, 408, 6, 40, 107, 31, 635, 203, 222, 225],
  [152, 200, 420, 740, 38, 133, 156, 947, 152, 408, 6, 40]
];
var colors = Highcharts.getOptions().colors;

// Map array of numbers to array of objects with color property
var series = data.map((serieData, index) => {
  return {
    name: 'Item ' + index,
    data: serieData.map((pointData, i) => {
    	return {
      	y: pointData,
        color: colors[index]
      }
    })
  }
});

// Create rotated array
var width = series[0].data.length;
var height = series.length;
var rotated = [];
for (let i = 0; i < height; ++i) {
	for (let j = 0; j < width; ++j) {
  	rotated[j] = rotated[j] ? rotated[j] : {data: []};
  	rotated[j].data.push(series[height-i-1].data[width-j-1])
  }
}

// Sort every row of rotated array
for (let i = 0; i < width; ++i) {
	rotated[i].data.sort((a, b) => a.y < b.y ? 1 : (a.y > b.y ? -1 : 0));
}

// Rotate back and update series array
for (let i = 0; i < width; ++i) {
	for (let j = 0; j < height; ++j) {
  	series[j] = series[j] ? series[j] : {data: []};
  	series[j].data[i] = rotated[width-i-1].data[height-j-1]
  }
}

// Filter empty elements
series = series.map(seriesData => {
	seriesData.data = seriesData.data.map(pointData => !!pointData.y ? pointData : null);
  return seriesData;
});

// Options
var options = {
  chart: {
    type: 'bar'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ]
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -40,
    y: 80,
    floating: true,
    borderWidth: 1,
  },
  series: series
};

// Create chart
var chart = Highcharts.chart('container', options);

Answer 2

[Anton Bobylev]

Попробуйте отфильтровать каждую серию jsfiddle.net/h5y3gddy или напишите функцию, которая будет возвращать уже нужный массив и используйте ее при формировании графика.