如何向chart.js图形添加工具提示
如何向chart.js图形添加工具提示
提问于 2013-04-13 03:14:47
我正在开发一个网页应用程序，最近我用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);回答 3
Stack Overflow用户
发布于 2013-08-24 17:01:27
有一个随工具提示一起提供的chartjs版本，您可以在此github页面https://github.com/Regaddi/Chart.js/tree/tooltips中获取它。
看起来上面的链接不再可用
然而，它在Github中可用的here
您可以查看文档here
Stack Overflow用户
发布于 2014-07-13 20:46:56
您只需从https://github.com/nnnick/Chart.js/blob/master/Chart.min.js复制Chart.min.js即可。
Stack Overflow用户
发布于 2014-12-24 14:35:22
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
showTooltips: true,
multiTooltipTemplate: "<%= value %>",
});使用此选项在chartjs中设置gloabl设置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15979149
复制相关文章
相似问题
腾讯云开发者
