Chart.js multiTooltip标签 [英] Chart.js multiTooltip labels

问题描述

我正在尝试让chart.js显示工具提示中每个数据集的标签名称。

I'm trying to get charts.js to display the label name from each dataset in the tooltip.

我的代码：

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月以上的工具提示：

With my above code the tooltip when hovering above "January" displays:

January
January - xx
January - xx

我有什么想法可以让它显示以下内容？

Any ideas how I can get it to display the following?

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 %>"
});

to：

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轴上打印的标题（的一部分）标签数组）

datasetLabel gets the value of the label from the dataset objects (in this case 'Bob' and 'Tina'), whereas label gets the caption printed on the x-axis (part of the labels array)

这篇关于Chart.js multiTooltip标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！