Chart.js 多工具提示标签

Posted 2023-02-21

【中文标题】Chart.js 多工具提示标签

【英文标题】：Chart.js multiTooltip labels

【发布时间】：2014-08-22 00:20:26

【问题描述】：

我正在尝试让 chart.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

【问题讨论】：

How put dataset labels into multiTooltipTemplate?的可能重复

【参考方案1】：

改变

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 数组的一部分)

【讨论】：

是否可以（如何）在内部使用 html？与legendTemplate（文档）中使用的一样，但似乎不适用于multiTooltipTemplate

documentation 甚至没有声明datasetLabel 参数！恼人的！我花了几个小时才找到解决方案，这个答案为我节省了一个小时。谢谢！

我已经找了好几个小时了。正如约翰所说，文档甚至没有说明！

模板中是否还有其他变量，如datasetLabel 可供使用？

查看github.com/nnnick/Chart.js/blob/master/Chart.js#L3155。但不确定 x/y 值是否始终可用。

【参考方案2】：

想更新答案，因为我找了很久。

您现在可以更改选项内的工具提示设置。见文档： http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration

至于问的问题，显示所有X数据。

window.myBar = new Chart(ctx).Line(barChartData, 
  tooltips: 
   mode: 'label'
            
);

干杯 汉内斯

【讨论】：

非常感谢！

如果这对你不起作用标签模式现在已弃用 - 请参阅下面的答案

【参考方案3】：

正如我回答 here 一样，您可以给 multiTooltipTemplate 一个函数。使用“调试器”在该函数中放置一个断点，并探索给定对象的所有您想要的属性。然后构造一个要在工具提示中显示的字符串：

multiTooltipTemplate: function(v) debugger; return someManipulation(v);
tooltipTemplate: function(v) return someOtherManipulation(v);

【参考方案4】：

与 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”模式。标签模式现已弃用。

您还可以使用“点”、“索引”和“最近”模式。