He mirado varios documentos y preguntas similares aquí, pero parece que no puedo encontrar la solución particular. ¡Disculpas si me he perdido algo obvio o si he repetido esta pregunta!
Como información general, implementé 4 gráficos usando el complemento Chart.js y pasé los datos requeridos usando PHP desde una base de datos. Todo esto funciona correctamente y está bien.
Mi problema es que necesito mostrar los datos en la información sobre herramientas como datos formateados, también conocido como. 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, los datos obviamente carecen de este formato y se muestran como -0.17222 que no quiero.
Lo siento, quería publicar una foto, ¡pero mi reputación es demasiado basura!
Tomo datos de la base de datos, luego los configuro en mi tabla:
var kpiRex = new Handsontable(example1, { data: getRexData(),Luego introduzco estos datos así en la sección del gráfico:
data: kpiRex.getDataAtRow(3)¡Cualquier ayuda sería genial! He estado atascado en esto durante horas y probablemente sea algo realmente simple que estoy pasando por alto.
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 comas de miles para un gráfico financiero, así que usé:
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; }); } } } }Desea especificar una plantilla de información sobre herramientas personalizada en las opciones de su 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 manera, 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, multiTooltipTemplate se aplica si tiene varios conjuntos de datos.
Estas opciones se mencionan en la sección de configuración de gráficos globales de la documentación . Eche un vistazo, vale la pena comprobar todas las demás 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í).
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+"€"; } } } }