Chart.js multiTooltip labels

Chart.js multiTooltip labels

本文关键字：labels multiTooltip js Chart      更新时间：2023-09-26

我想让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'模式

相关文章：