在chart.js的工具提示中显示自定义数据集属性 [英] Displaying custom dataset properties in tooltip in chart.js

问题描述

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

What would be the easiest way possible to display custom properties in the pie chart tooltip?

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

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

I tried simply adding a "decription" property and then printing it, but without any luck. It just gives me an error saying description is not defined. I saw that there is a custom tooltip functionality, but that seemed like a lot of work for something trivial. Is there an easier way?

推荐答案

图表不正式支持此功能。但是在LineChart的情况下，您可以使用数据自定义工具提示。

Charts doesn't support this feature officially. But you can customize tooltip with your data like this in case of LineChart.

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

first, make chart with datasets and options

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

，然后添加要在工具提示中显示的属性

and, add properties what you want show in tooltip

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

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

then, you can use these properties like this.

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

我希望这对某人有帮助。 ：D

I hope this is helpful to someone. :D

这篇关于在chart.js的工具提示中显示自定义数据集属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！