我正在尝试让 charts.js 在工具提示中显示每个数据集的标签名称。
我的代码:
var barChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "Bob",
fillColor : "rgba(88,196,246,0.5)",
strokeColor : "rgba(88,196,246,0.8)",
highlightFill: "rgba(88,196,246,0.75)",
highlightStroke: "rgba(88,196,246,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: "Tina",
fillColor : "rgba(74,211,97,0.5)",
strokeColor : "rgba(74,211,97,0.8)",
highlightFill : "rgba(74,211,97,0.75)",
highlightStroke : "rgba(74,211,97,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Line(barChartData, {
responsive : true,
animation: true,
barValueSpacing : 5,
barDatasetSpacing : 1,
tooltipFillColor: "rgba(0,0,0,0.8)",
multiTooltipTemplate: "<%= label %> - <%= value %>"
});
使用我上面的代码,将鼠标悬停在“一月”上方时会显示工具提示:
January
January - xx
January - xx
有什么想法可以让它显示以下内容吗?
January
Bob - xx
Tina - xx
最佳答案
改变
window.myBar = new Chart(ctx).Line(barChartData, {
responsive : true,
animation: true,
barValueSpacing : 5,
barDatasetSpacing : 1,
tooltipFillColor: "rgba(0,0,0,0.8)",
multiTooltipTemplate: "<%= label %> - <%= value %>"
});
到:
window.myBar = new Chart(ctx).Line(barChartData, {
responsive : true,
animation: true,
barValueSpacing : 5,
barDatasetSpacing : 1,
tooltipFillColor: "rgba(0,0,0,0.8)",
multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
});
修改到最后一行
multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
datasetLabel
从数据集对象(在本例中为“Bob”和“Tina”)获取标签的值,而 label
获取打印在 x 上的标题-axis(labels
数组的一部分)
关于javascript - Chart.js 多工具提示标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24510278/