跳过 x 轴上的数据点并根据 highcharts 中的数据分组

Question

我正在研究 highcharts，根据标签（即猕猴桃、苹果、香蕉）和计数（即 7、3、486）在 x 轴和 y 轴上映射数据，并根据数据将日期放在 x 轴上.谁能帮助我了解如何根据日期和标签对数据进行分组以显示计数（y 轴）。任何帮助将不胜感激。谢谢！！

我使用的数据如下： enter image description here

Answer 1

可以通过多种方式实现，下面是我的解读：

const data = [
  ['2018-03-05', 'kiwi', 7],
  ['2018-03-05', 'apple', 486],
  ['2018-03-05', 'grapes', 3],
  ['2018-03-07', 'banana', 33],
  ['2018-03-07', 'kiwi', 64],
  ['2018-03-07', 'person', 433],
  ['2018-03-07', 'grapes', 137],
  ['2022-01-20', 'kiwi', 113],
  ['2022-01-20', 'person', 444],
  ['2022-01-21', 'banana', 50],
  ['2022-01-21', 'kiwi', 59],
  ['2022-01-21', 'person', 600],
  ['2022-01-21', 'grapes', 51],
  ['2022-01-22', 'banana', 52],
  ['2022-01-22', 'kiwi', 74],
];

const seriesNames = [...new Set(data.map(d => d[1]))];

const series = seriesNames.map(seriesName => {
  return {
    name: seriesName,
    data: data.filter(d => d.includes(seriesName)).map(d => [d[0], d[2]])
  }
})

Highcharts.chart('container', {

  series: series
});

演示：https://jsfiddle.net/BlackLabel/0s1z3aey/

跳过 x 轴上的数据点并根据 highcharts 中的数据分组

skip data point on x-axis and group by based on data in highcharts

javascript

angular

highcharts