Chart.js multiTooltip标签
Chart.js multiTooltip标签
提问于 2014-07-01 20:26:57
我正在尝试让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回答 4
Stack Overflow用户
发布于 2014-07-08 09:38:29
变化
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从dataset对象(在本例中为'Bob‘和'Tina')获取标签的值，而label获取打印在x轴( labels数组的一部分)上的标题
Stack Overflow用户
发布于 2016-08-21 18:19:35
我想更新答案，因为我已经搜索了很长时间。
现在可以在选项中更改工具提示设置。请参阅文档：http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration
对于被问到的问题，显示所有X数据。
window.myBar = new Chart(ctx).Line(barChartData, {
tooltips: {
mode: 'label'
}
});干杯Hannes
Stack Overflow用户
发布于 2016-01-20 15:14:47
正如我回答here时所说，您可以给multiTooltipTemplate一个函数。使用“debugger”在该函数中放置一个断点，然后探索给定的对象以获取您想要的所有属性。然后构造一个要在工具提示中显示的字符串：
multiTooltipTemplate: function(v) {debugger; return someManipulation(v);}
tooltipTemplate: function(v) {return someOtherManipulation(v);}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24510278
复制相关文章
相似问题