Chart.js multiTooltip标签

Question

我正在尝试使用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 %>"

});

使用上面的代码，当悬停在“1月”上方时，工具提示显示：

January
January - xx
January - xx

任何想法我怎么能让它显示以下内容？

January
Bob - xx
Tina - xx

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

Answer 2

想要更新答案，因为我搜索了很长时间。

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

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

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

干杯汉斯

Answer 3

正如我在这里回答的那样，你可以给multiTooltipTemplate一个函数。 使用'debugger'在该函数中放置一个断点，并探索给定对象以获取您想要的所有属性。 然后构造一个要在工具提示中显示的字符串：

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

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

您还可以使用'point'，'index'和'nearest'模式。