图表双系列数据重复问题求助：调用不同字段却数据一致

问题根源 #

你遇到的核心问题有两点：

1. 两个图表系列共用了同一个serie数组，必然会显示完全相同的数据
2. 当前的serie数组每个元素同时包含field3和field8的数值，但每个图表系列只需要对应自身的字段数据（时间+单个字段值）

解决方案 #

需要拆分数据，为每个系列单独生成对应的数据数组，再分别绑定到对应的series配置中：

修改数据处理代码 #

function populatechart(pallino) {
  console.log(pallino)
  var misure = pallino.feeds;
  // 为两个系列分别创建独立的数据数组
  var pm25Serie = [];
  var axelSerie = [];

  for (let i = 0; i < misure.length; i++) {
    // PM2.5系列：时间戳 + field3数值
    pm25Serie.push([
      Date.parse(misure[i].created_at),
      parseFloat(misure[i].field3)
    ]);
    // Axel系列：时间戳 + field8数值
    axelSerie.push([
      Date.parse(misure[i].created_at),
      parseFloat(misure[i].field8)
    ]);
  }

  return { pm25Serie, axelSerie };
}

修改图表series配置 #

// 获取处理好的两个独立数据数组
const { pm25Serie, axelSerie } = populatechart(yourPallinoData);

series: [
  {
    type: 'line',
    name: 'PM2.5',
    data: pm25Serie
  },
  {
    type: 'column',
    name: 'Axel',
    data: axelSerie
  }
],

关键说明 #

• 图表系列的data数组，标准格式为[时间戳, 对应字段值]，无需将两个字段值合并在同一个元素中
• 拆分数据后，每个系列绑定专属的数组，就能展示不同字段的内容了

内容的提问来源于stack exchange，提问作者Cooky