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

我尝试添加一个"decription"属性并打印它，但没有成功。它只是给了我一个错误，说description未定义。我看到有自定义工具提示功能，但那似乎对于这个微不足道的事情来说太麻烦了。是否有更简单的方法？

- Wobbley

Answer 1

图表官方不支持这个功能。但是您可以像这样使用自己的数据自定义工具提示，例如LineChart。

首先，使用数据集和选项创建图表。

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

- brannpark

---

在饼图的情况下，您应该首先查看饼图对象的结构。祝你好运！ - brannpark

Answer 2

你应该去：

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

- Guiliwi

Answer 3

这其实不是一个真正的解决方案，但我通过在标签内添加描述来解决了它...

label: "Label 2 - Description",

- Wobbley