如何用chart.js正确绘制图形?

6uxekuva  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(236)

我正在用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,
          }
        }],
      },
    };
esbemjvw

esbemjvw1#

您需要以0作为x轴的起点,这就是它的实现方式:

版本3.x

options: {
    scales: {
        x: {
            beginAtZero: true
        }
    }
}

请尝试浏览Charts js的文档,网址为:此处

相关问题