javascript - Cómo usar el tooltipTemplate en Chart.JS 2.0

Question

Estoy tratando de usar el gráfico de anillos con múltiples conjuntos de datos y también uso la función tooltipTemplate para personalizar el texto dentro de la información de herramientas, pero nada funciona. Esto funcionó en la versión anterior de Chart js, pero eso no es compatible con múltiples conjuntos de datos. ¿Alguien puede ayudar? A continuación se muestra mi código:

options: {
tooltips: {
tooltipTemplate: "<%if (label){%><%=value%><%} else {%> No data <%}%>",
},
}

Answer 1

Como Potatopeelings ha mencionado en los comentarios, debe establecer una devolución de llamada para la información sobre herramientas.

Aquí hay un ejemplo:

options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || ''Other'';
var label = data.labels[tooltipItem.index];
return datasetLabel + '': '' + label;
}
}
}
}

demo en vivo

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: ''doughnut'',
data: {
labels: ["Men", "Women", "Unknown"],
datasets: [{
label: ''Sweden'',
data: [60, 40, 20],
backgroundColor: [''rgba(158, 216, 202, 0.75)'', ''rgba(255, 150, 162, 0.75)'', ''rgba(160, 160, 160, 0.75)'']
}, {
label: ''Netherlands'',
data: [40, 70, 10],
backgroundColor: [''rgba(158, 216, 202, 0.5)'', ''rgba(255, 150, 162, 0.5)'', ''rgba(160, 160, 160, 0.5)'']
}, {
data: [33, 33, 34],
backgroundColor: [''rgba(158, 216, 202, 0.25)'', ''rgba(255, 150, 162, 0.25)'', ''rgba(160, 160, 160, 0.25)'']
}]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || ''Other'';
var label = data.labels[tooltipItem.index];
return datasetLabel + '': '' + label;
}
}
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

Answer 2

La herramienta de información Chart.js 1.x tooltips es equivalente a options.tooltips.callbacks.title en Chart.js 2.x:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: ''doughnut'',
data: {
labels: [
"Men",
"Women",
"Unknown"
],
datasets: [{
label: ''Sweden'',
data: [60, 40, 20],
backgroundColor: [
''rgba(158, 216, 202, 0.75)'',
''rgba(255, 150, 162, 0.75)'',
''rgba(160, 160, 160, 0.75)''
]
}, {
label: ''Netherlands'',
data: [40, 70, 10],
backgroundColor: [
''rgba(158, 216, 202, 0.5)'',
''rgba(255, 150, 162, 0.5)'',
''rgba(160, 160, 160, 0.5)''
]
}, {
data: [33, 33, 34],
backgroundColor: [
''rgba(158, 216, 202, 0.25)'',
''rgba(255, 150, 162, 0.25)'',
''rgba(160, 160, 160, 0.25)''
]
}]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return ''This value '' + tooltipItem.yLabel;
},
title: function(tooltipItem, data) {
return ''The tooltip title '' + tooltipItem[0].xLabel;
}
}
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

Answer 3

Tiene que configurar las options para el mode información sobre herramientas a la label para mostrar múltiples sugerencias

options: {
tooltips: {
mode : ''label''
}
}