Chart.js multiTooltip标签
我试图让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”上方hover的工具提示显示如下：
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 ，而label获取x轴上的标题（ labels数组的一部分）
想要更新答案，因为我在寻找很久。
您现在可以更改选项内的工具提示设置。 请参阅Docu： http : //www.chartjs.org/docs/#chart-configuration-tooltip-configuration
至于所问的问题，显示所有的X数据。
window.myBar = new Chart(ctx).Line(barChartData, { tooltips: { mode: 'label' } });
干杯Hannes
正如我在这里回答的，你可以给multiTooltipTemplate一个函数。 用“debugging器”在该函数内部放置一个断点，然后探索给定对象的所有属性。 然后构build一个string在你的工具提示中显示：
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'模式。 标签模式现在已被弃用。
您也可以使用“点”，“索引”和“最近”的模式。
