Chart.js绘图异常求助：相同值仅显示首个数据的问题

问题描述 #

使用Chart.js绘制图表时，已解决多轴场景下数据分组错误仅显示一条线的问题，但新问题出现：当数据值相同时，图表仅显示第一个值，无法正常填充表格。

当前效果 #

预期效果 #

测试代码 #

const pivotBy = (data, groupby) => {
  let uniqueKeys = [];

  uniqueKeys = data.reduce((uniqueValues, obj) => {
    if (!uniqueValues.includes(obj[groupby])) {
      uniqueValues.push(obj[groupby]);
    }
    return uniqueValues;
  }, []);

  return uniqueKeys;
};

let data = [{
    "28": 483.00,
    "29": 481.00,
    "30": 486.00,
    "fecha": 1621915200000
  },
  {
    "28": 483.00,
    "29": 481.00,
    "30": 486.00,
    "fecha": 1622001600000
  },
  {
    "28": 483.00,
    "29": 481.00,
    "30": 486.00,
    "fecha": 1622088000000
  },
  {
    "28": 483.00,
    "29": 481.00,
    "30": 486.00,
    "fecha": 1622174400000
  },

];

let keyTemporales = []
data.forEach((obj) => {
  keyTemporales = keyTemporales.concat(Object.keys(obj).filter((item) => keyTemporales.indexOf(item) < 0));
});
/* Esta sintaxis Object.keys(data[0])
 * Se basa en un supuesto, todos los objetos del array son iguales del array son iguales. Es decir
 * si en el primero viene dos códigos 18 y 51 no puede pasar que exista un objeto que tenga 18, 51 mas un numero distinto
 */
keyTemporales.forEach((key) => {
  console.log("Preparamos a imprimir los valores con el key: " + key);
  console.log(pivotBy(data, key));
});

完整图表生成逻辑代码 #

public generateChart(type) {

    this.checkGrafico = '0';
    if (type == null || type == undefined) {
      type = 0;
    } else {
      this.grafico.destroy;
    }
    let labels = [];
    const setDatos = [];
    let label = [];

    const pivotBy = (data, groupby) => {
      let uniqueKeys = [];

      uniqueKeys = data.reduce((uniqueValues, obj) => {
        if (!uniqueValues.includes(obj[groupby])) {
          uniqueValues.push(obj[groupby]);
        }
        return uniqueValues;
      }, []);

      return uniqueKeys;
    };

    let data = this.listadoResultado;

    this.headerVariedades.forEach((item) => {
      label = item.pro_des;
    })

    let keyTemporales = []
    data.forEach((obj) => {
      keyTemporales = keyTemporales.concat(Object.keys(obj).filter((item) => keyTemporales.indexOf(item) < 0));
    });

    keyTemporales.forEach((key) => {
      console.log(key)
      if (key === 'fecha') {
        labels = pivotBy(data, key).map((value) => {
          return this.helpersService.transformDate(value, 'dd/MM/yyyy');
        });
        // } else if (key === 'semana') {
        //     labels = pivotBy(data, key).map((value) => {
        //         return ("Semana " + value['semana']);
        //     });
      } else if (key === 'mesTemporada') {
        labels = pivotBy(data, key).map((value) => {
          return value;
        });
      } else {
        const color = this.helpersService.randomColor();
        const obj = {
          label: label,
          fill: false,
          backgroundColor: color,
          borderColor: color,
          data: pivotBy(data, key),
        };
        setDatos.push(obj);
      }
    });

    this.datosGrafico = {
      labels: labels,
      datasets: setDatos,
    };

    this.titulos = this.titulosGrilla;

    // Configuraciones correspondientes al gráfico.
    this.opcionesGrafico = {
      maintainAspectRatio: false,
      legend: {
        display: false,
      },
      elements: {
        line: {
          tension: 0,
        },
      },
      scales: {
        xAxes: [{
          ticks: {
            beginAtZero: true,
          }
        }],
      },
    };

问题根源与解决方案 #

根源 #

核心问题在pivotBy函数：它通过reduce和includes过滤重复值，导致数据数组长度和labels不匹配，Chart.js无法渲染所有重复数据点。

修复方案 #

修改pivotBy函数，直接提取每条数据对应字段的值，保留所有重复项：

const pivotBy = (data, groupby) => {
  return data.map(obj => obj[groupby]);
};

修改后，数据数组长度与labels完全匹配，Chart.js能正常渲染所有数据点，表格也会完整填充。

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