javascript 如何向 chart.js 图表添加工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15979149/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add tooltips to chart.js graph
提问by Eric
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:
我正在开发一个 web 应用程序，最近我用 chart.js 交换了谷歌图表，因为它在视觉上更具吸引力。但是，我的一个损失是我无法再获得高于数据点的工具提示。我想知道是否有人知道如何做到这一点，因为我是 javascript 新手。这是图形和设置的代码：
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);
回答by Vignesh Subramanian
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
有一个带有工具提示的chartjs版本，你可以在这个github页面https://github.com/Regaddi/Chart.js/tree/tooltips 中得到它
Looks like the above link is no longer available
上面的链接好像不能用了
However its available herein Github
然而其可用在这里在Github上
You can see the documentation here
您可以在此处查看文档
回答by Chatri Sae-Tung
You just have to copy Chart.min.js from https://github.com/nnnick/Chart.js/blob/master/Chart.min.js.
你只需要从https://github.com/nnnick/Chart.js/blob/master/Chart.min.js复制 Chart.min.js 。
回答by Arun Yokesh
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
showTooltips: true,
multiTooltipTemplate: "<%= value %>",
});
use this to set a gloabl settings in chartjs.
使用它在 chartjs 中设置全局设置。
