如何将工具提示添加到 chart.js 图表
我正在开发一个 web 应用程序,我最近用 chart.js 交换了谷歌图表,因为它在视觉上更具吸引力.但是,我遭受的一个损失是我无法再在数据点上方获得工具提示.我想知道是否有人知道如何做到这一点,因为我是 javascript 的新手.这是图表和设置的代码:
I'm working on a webapp and I recently swapped google charts with chart.js because it is visually more appealing. However, the one loss that I took is that I can no longer get tooltips above the data points. I was wondering if anyone knows how this can be done as I am a novice with javascript. Here is the code for the graph and the settings:
var data = {
labels : graphData[0],
datasets : [
{
fillColor : "rgba(200,160,100,0.5)",
strokeColor : "rgba(80,240,70,1)",
pointColor : "rgba(80,240,70,1)",
pointStrokeColor : "#fff",
data : graphData[3]
},
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : graphData[1]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : graphData[2]
}
]
};
var options = {
scaleShowGridLines : true,
scaleShowLabels : true,
animationSteps : 150,
scaleOverride: true,
scaleSteps : Math.max.apply(Math, graphData[3]),
scaleStepWidth : 1,
scaleStartValue : 1
};
var ctx = document.getElementById("chart_div").getContext("2d");
ctx.canvas.width = Math.max(graphData[0].length * 60, 600);
var myNewChart = new Chart(ctx).Line(data,options);
$('#chart_area').fadeIn();
$('html, body').animate({
scrollTop: $("#picture_area").offset().top
}, 1000);
推荐答案
有一个chartjs版本和tooltip一起可用你可以在这个 github 页面中得到它https://github.com/Regaddi/Chart.js/tree/tooltips
There is a chartjs version available along with tooltip you can get it in this github page https://github.com/Regaddi/Chart.js/tree/tooltips
上面的链接好像失效了
但是它在 Github 中的 这里 可用
However its available here in Github
您可以查看文档这里
相关文章