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 puedo mostrar los datos de xAxes e yAxes en el tooltip de Chart JS?

30 Jul, 2023 Programación

Estoy tratando de lograr el Tooltip que se muestra a continuación en la primera imagen. Dentro del tooltip, necesito mostrar los datos de yAxes y xAxes. La versión de chart.js que estoy usando es la 3.7.0.

Mi tooltip se ve así:

¡tooltip

El tooltip que estoy intentando copiar:

¡tooltip

La documentación de chart.js es bastante difícil de entender para mí. ¿Hay algún gurú que pueda explicarme?

Pregunta: ¿Por qué mi tooltip devuelve los datos de yAxes, que son retornados como una variable (label), como indefinidos?

¿Existen otras opciones que pueda utilizar para que mi gráfico se vea como en la segunda imagen?

Mi código:

tooltip: {
   displayColors: false,
   backgroundColor: 'rgba(45,132,180,0.8)',
   bodyFontColor: 'rgb(255,255,255)',
   callbacks: {
     title: function(item, everything){
       return;
     },
     label: function(item, everything){
       //console.log(item);
       //console.log(everything);

       let first = item.yLabel;
       let second = item.xLabel;

       let label = first + ' ppm';
       return label;
     }
   }
 }

¡Gracias de antemano por su tiempo y esfuerzo, por favor ayúdeme a descubrir qué estoy haciendo mal!

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    La razón por la que tus datos yAxes están devolviendo undefined es porque estás intentando acceder a ellos a través de item.yLabel, pero item solo contiene información sobre datasetIndex, index y value. Para acceder a los datos yAxes, necesitarás obtener los correspondientes datos xAxes y luego acceder a los datos yAxes usando el datasetIndex.

    Para lograr el formato de tooltip que deseas, puedes modificar tu función de devolución de llamada label de la siguiente manera:

    tooltip: {
  displayColors: false,
  backgroundColor: 'rgba(45, 132, 180, 0.8)',
  bodyFontColor: 'rgb(255, 255, 255)',
  callbacks: {
    title: function(item, everything) {
      return 'Fecha de muestra: ' + item[0].label;
    },
    label: function(item, everything) {
      var datasetIndex = item.datasetIndex;
      var xAxesValue = everything.labels[item.index];
      var yAxesValue = everything.datasets[datasetIndex].data[item.index];
      return 'PM2.5: ' + yAxesValue + ' μg/m³';
    }
  }
}

    Esto modifica la devolución de llamada title para mostrar la fecha y utiliza el array labels para obtener el valor correspondiente de xAxes. La devolución de llamada label calcula el valor de yAxes basado en el datasetIndex, obtiene el valor correspondiente de xAxes utilizando everything.labels y formatea la etiqueta del tooltip en consecuencia.

    Con estos cambios, el tooltip debería verse más como el que se muestra en la segunda imagen.

    ¡Espero que esto te ayude! Hazme saber si tienes alguna otra pregunta.

Comments are closed.