Estoy tratando de mostrar algunos datos utilizando un gráfico de rosquilla de Chart.js2.
Mi gráfico actual tiene este aspecto
Mi salida deseada debe mostrar otro atributo, que es el porcentaje, y se ve así:
He leído la documentación, pero no puedo con esto porque es muy general y soy nuevo en JavaScript.
Mi código para el primer gráfico es el siguiente:
const renderCashCurrencyPie = (cashAnalysisBalances) => {
if (cashAnalysisBalances) {
const currenciesName = cashAnalysisBalances
.map(curName => curName.currency);
const availableCash = cashAnalysisBalances
.map(avCash => avCash.availableCash);
let currenciesCounter = 0;
for (let i = 0; i < currenciesName.length; i += 1) {
if (currenciesName[i] !== currenciesName[i + 1]) {
currenciesCounter += 1;
}
}
const currenciesData = {
labels: currenciesName,
datasets: [{
data: availableCash,
backgroundColor: [
'#129CFF',
'#0C6DB3',
'#FF6384',
'#00FFFF'
],
hoverBackgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56',
'#00FFFF'
]
}]
};
Puede personalizar los tooltips utilizando la sección de configuración de tooltip de las opciones del gráfico, como se explica aquí: http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration
Como se muestra en el código de ejemplo a continuación, puede cambiar cosas como el color, el tamaño y los estilos. Consulte la documentación enlazada más arriba para obtener una lista completa de las opciones configurables.
Si desea añadir el porcentaje a la información sobre herramientas, puede utilizar tooltip callbacks. La documentación tiene una lista de todos los posibles campos de devolución de llamada personalizables.
En el siguiente ejemplo, he configurado el "title" para mostrar el nombre de la etiqueta, "label" para mostrar el valor, y he añadido el porcentaje a "afterLabel".
var myChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: {
tooltips: {
callbacks: {
title: function(tooltipItem, data) {
return data['labels'][tooltipItem[0]['index']];
},
label: function(tooltipItem, data) {
return data['datasets'][0]['data'][tooltipItem['index']];
},
afterLabel: function(tooltipItem, data) {
var dataset = data['datasets'][0];
var percent = Math.round((dataset['data'][tooltipItem['index']] / dataset["_meta"][0]['total']) * 100)
return '(' + percent + '%)';
}
},
backgroundColor: '#FFF',
titleFontSize: 16,
titleFontColor: '#0066ff',
bodyFontColor: '#000',
bodyFontSize: 14,
displayColors: false
}
}
});
JSFiddle de trabajo:
Como en la respuesta de @Tot Zam's, pero utilizando funciones de flecha para abreviar:
options: {
tooltips: {
callbacks: {
title: (items, data) => data.datasets[items[0].datasetIndex].data[items[0].index].myProperty1,
label: (item, data) => data.datasets[item.datasetIndex].data[item.index].myProperty2
}
}
}