Javascript 如何在 Chart.JS 2.0 上使用 tooltipTemplate
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37158141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use the tooltipTemplate on Chart.JS 2.0
提问by lookatdan
I am trying to use the doughnut chart with multiple datasets and also use the tooltipTemplate feature to customize the text inside the tooltips but nothing works. This worked in the previous Chart js version but that doesn't support multiple datasets. Can anyone help? Below is my code:
我正在尝试将圆环图与多个数据集一起使用，并使用 tooltipTemplate 功能自定义工具提示内的文本，但没有任何效果。这在以前的 Chart js 版本中有效，但不支持多个数据集。任何人都可以帮忙吗？下面是我的代码：
options: {
tooltips: {
tooltipTemplate: "<%if (label){%><%=value%><%} else {%> No data <%}%>",
},
}
回答by Linus
As potatopeelings has mentioned in the comments, you have to set a callback for the tooltip.
正如potatopeelings 在评论中提到的，您必须为工具提示设置回调。
Here is an example:
下面是一个例子：
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || 'Other';
var label = data.labels[tooltipItem.index];
return datasetLabel + ': ' + label;
}
}
}
}
live demo
现场演示
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>回答by Machado
The Chart.js 1.x tooltipsTemplate is equivalent to options.tooltips.callbacks.titlein Chart.js 2.x:
Chart.js 1.x tooltipsTemplate 等效options.tooltips.callbacks.title于 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>回答by Ankit Sharma
You have to set optionsfor tooltip modeto labelfor showing multiple tooltip
您必须将options工具提示mode设置label为显示多个工具提示
options: {
tooltips: {
mode : 'label'
}
}
