number - JavaScript Chart.js-Formato de datos personalizado para mostrar en la información sobre herramientas

charts js labels position

Question

He examinado varios documentos y preguntas similares aquí, pero no puedo encontrar la solución en particular. Disculpas si me he perdido algo obvio o si he repetido esta pregunta.

Como un poco de información básica, he implementado 4 gráficos usando el plugin Chart.js y los he pasado en los datos requeridos usando PHP desde una base de datos. Todo está funcionando correctamente y está bien.

Mi problema es que necesito mostrar los datos en la información sobre herramientas como datos formateados alias. como numérico con%. Como ejemplo, uno de mis datos de la base de datos es -0.17222. Lo he formateado como un porcentaje para mostrar en mi tabla y todo está bien. Sin embargo, al configurar los datos para el gráfico de barras chart.js, obviamente los datos carecen de este formato y se muestran como -0.17222 que no quiero.

Lo siento, quería publicar una imagen, pero mi reputación es demasiado basura.

Agarro datos de la base de datos, luego los configuro en mi mesa:

var kpiRex = new Handsontable(example1, {
    data: getRexData(),

Luego alimentaré estos datos como en la sección del gráfico:

data: kpiRex.getDataAtRow(3)

¡Cualquier ayuda sería genial! Me he quedado atrapado en esto por horas y es probable que sea algo realmente simple que estoy pasando por alto.

Answer 1

Desea especificar una plantilla de información personalizada en sus opciones de gráfico, como esta:

 // String - Template string for single tooltips
 tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value + '' %'' %>",
 // String - Template string for multiple tooltips
 multiTooltipTemplate: "<%= value + '' %'' %>",

De esta forma, puede agregar un signo ''%'' después de sus valores si eso es lo que desea.

Aquí hay un jsfiddle para ilustrar esto .

Tenga en cuenta que tooltipTemplate se aplica si solo tiene un conjunto de datos, se aplica multiTooltipTemplate si tiene varios datasets.

Estas opciones se mencionan en la sección de configuración global del gráfico de la documentación . Echa un vistazo, vale la pena buscar todas las otras opciones que se pueden personalizar allí.

Tenga en cuenta que sus conjuntos de datos solo deben contener valores numéricos. (No hay signos de% u otras cosas allí).

Answer 2

En chart.js 2.1.6, hice algo como esto (en mecanografiado):

  let that = this;
  options = {
    legend: {
      display: false,
      responsive: false
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          let account: Account = that.accounts[tooltipItem.index];
          return account.accountNumber+":"+account.balance+"€";
        }
      }
    }
  }

Answer 3

Para chart.js 2.0+, esto ha cambiado (no más tooltipTemplate / multiTooltipTemplate). Para aquellos que solo desean acceder al valor actual sin formato y comenzar a modificarlo, la información sobre herramientas predeterminada es la misma que:

options: {
    tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
                return tooltipItem.yLabel;
            }
        }
    }
}

Es decir, puede devolver modificaciones a tooltipItem.yLabel , que contiene el valor del eje y. En mi caso, quería agregar un signo de dólar, redondeo y miles de comas para un cuadro financiero, así que utilicé:

options: {
    tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
                return "$" + Number(tooltipItem.yLabel).toFixed(0).replace(/./g, function(c, i, a) {
                    return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;
                });
            }
        }
    }
}

Answer 4

Puede dar a tooltipTemplate una función y formatear la información sobre herramientas como desee:

tooltipTemplate: function(v) {return someFunction(v.value);}
multiTooltipTemplate: function(v) {return someOtherFunction(v.value);}

Los argumentos dados ''v'' contienen mucha información además de la propiedad ''valor''. Puede poner un ''depurador'' dentro de esa función e inspeccionarlos usted mismo.

Answer 5

tooltips: {
            enabled: true,
                  mode: ''single'',
                  callbacks: {
                    label: function(tooltipItems, data) { 
                      return data.datasets[tooltipItems.datasetIndex].label+": "+tooltipItems.yLabel;
                    }
                  }
                }

Answer 6

tooltips: {
          callbacks: {
            label: (tooltipItem, data) => {
              // data for manipulation
              return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
            },
          },
        },