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'模式。 标签模式现在已被弃用。

您也可以使用“点”,“索引”和“最近”的模式。