Chart.js multiTooltip labels
Chart.js multiTooltip labels
我想让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
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轴上的标题(labels
数组的一部分)
想更新答案,因为我搜索了很长时间。
你现在可以改变选项中的工具提示设置。看到Docu:http://www.chartjs.org/docs/chart-configuration-tooltip-configuration
对于所问的问题,显示所有X数据。
window.myBar = new Chart(ctx).Line(barChartData, {
tooltips: {
mode: 'label'
}
});
干杯汉斯·
正如我在这里回答的那样,您可以给multiTooltipTemplate一个函数。在该函数中使用'debugger'设置一个断点,并在给定对象中探索您想要的所有属性。然后构造一个要显示在工具提示中的字符串:
multiTooltipTemplate: function(v) {debugger; return someManipulation(v);}
tooltipTemplate: function(v) {return someOtherManipulation(v);}
与Hannes的回答类似,但文档从那时起已经更新了-现在有各种各样的选项,他提供的链接不再去任何地方,因为该选项已被弃用。
我正在添加一个新的答案,因为我花了一段时间才找到。
这是x模式-在工具提示中显示基于x轴的多个数据集信息
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
mode: 'x'
}
}
})
http://www.chartjs.org/docs/latest/general/interactions/modes.html x
也有'y'模式。标签模式现已弃用。
你也可以使用'point', 'index'和'nearest'模式