tooltip - 在 chart.js 的工具提示中显示自定义数据集属性

Question

在饼图工具提示中显示自定义属性的最简单方法是什么？

var pieData = [
    {
        value: 40,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Label 1",
        description: "This is a description for label 1"
    },
    {
        value: 60,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Label 2",
        description: "This is a description for label 2"
    }
];

var options = {
    tooltipTemplate: "<%= label %> - <%= description %>"
};

window.onload = function(){
    var ctx = document.getElementById("chart-area").getContext("2d");
    window.myPie = new Chart(ctx).Doughnut(pieData, options);
};

我试着简单地添加一个“描述”属性然后打印它，但没有任何运气。它只是给我一个错误，说描述未定义。我看到有一个自定义工具提示功能，但对于一些微不足道的事情来说，这似乎需要做很多工作。有没有更简单的方法？

Answer 1

Charts 官方不支持此功能。但是在折线图的情况下，您可以像这样使用您的数据自定义工具提示。

首先，用数据集和选项制作图表

var chart = new Chart(ctx).Line(dataset, opt);

然后，添加您希望在工具提示中显示的属性

var points = chart.datasets[0].points;
for (var i = 0; i < points.length; i++) {
    // Add properties in here like this
    // points[i].time = '2015-04-23 13:06:24'; 
}

然后，您可以像这样使用这些属性。

tooltipTemplate: "<%=time%> : <%=value%>"

希望对大家有所帮助。 :D