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

2023-09-07 12:24:46 作者:゛糖糖//

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

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

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

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?

推荐答案

Charts 官方暂不支持此功能.但是对于 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