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

我试过简单地添加一个＆＃34; decription＆＃34;财产然后打印它，但没有任何运气。它只是给我一个错误，说明描述没有定义。我看到有一个自定义的工具提示功能，但这似乎是一些微不足道的工作。有更简单的方法吗？

Answer 1

你应该去：

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

Answer 2

图表不正式支持此功能。但是，如果是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

Answer 3

它确实不是解决方案，但我通过在标签中添加说明来解决它......

label: "Label 2 - Description",

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

3 个答案: