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'
 }           
});

干杯汉斯