es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

cómo cambiar el color de la etiqueta y establecer los valores del eje y en intervalos de 1k y ocultar el eje y?

Haz clic aquí para ver la descripción de la imagen

Archivo html

Archivo ts

barChartOptions: ChartConfiguration['options'] = {
    responsive: true,
    scales: {
      yAxes:[{
        ticks: {
          stepSize: 2.5,
          beginAtZero: true,
          callback: function(value, index, values) {
            if (value === 0) {
              return '';
            } else if (value === 100000) {
              return '1k';
            } else {
              return value;
            }
          }
        }
      }]
    }
  };

 barChartLabels: string[] = [];
  barChartType: ChartType = 'bar';
  barChartLegend: boolean = true;
  barChartData: any[] = [];
  loaded = false;

 this.service.Salescount(form).subscribe((data) => {
      this.name = data.result;
      this.barChartLabels = this.name.map((item) => item.name);
      this.barChartData = this.name.map((item) => item.sales);
      this.loaded = true;
}

La versión que estoy utilizando de “chart.js” es “^2.9.4” y de “ng2-charts” es “^2.4.2”. Quiero mostrar “1k” en lugar de “100000” y ocultar el 0 en el eje y.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    Para que se muestre el valor 100000 como 1k y ocultar el 0 en el eje y, puedes modificar el objeto ticks dentro de scales.yAxes en barChartOptions de la siguiente manera:

    barChartOptions: ChartConfiguration['options'] = {
      responsive: true,
      scales: {
        yAxes:[{
          ticks: {
            callback: function(value, index, values) {
              if (value >= 1000) {
                value = value / 1000 + 'k';
              }
              if (value != 0) {
                return value;
              }
            }
          }
        }]
      }
    };
    

    La función callback dentro de ticks verifica si el valor es mayor o igual a 1000 y, en caso afirmativo, lo divide por 1000 y agrega ‘k’ al final para mostrarlo como 1k. También verifica si el valor no es 0 y lo devuelve para mostrarlo en el eje y.

Comments are closed.