[英]Display a single tooltip with Chart.JS?
I've made a chart using Chart.JS and am hoping to limit the tooltip display to 1 single point. 我已经使用Chart.JS制作了图表,希望将工具提示显示限制为1个单点。 I have a working demo where all tooltips are currently being displayed that can be viewed here: https://jsfiddle.net/p2yd6hut/
我有一个工作演示,当前正在显示所有工具提示,可在此处查看: https : //jsfiddle.net/p2yd6hut/
var data1 = {
labels : ["SUN","MON","TUE","WED","THU","FRI","SAT"],
datasets : [
{
fillColor : "rgba(255,255,255,.1)",
strokeColor : "rgba(0,0,0,.25)",
pointColor : "#0af",
pointStrokeColor : "rgba(255,255,255,1)",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [150,200,235,390,290,250,250]
}
]
}
var options1 = {
scaleFontColor : "rgba(0,0,0,1)",
scaleLineColor : "rgba(0,0,0,.1)",
scaleGridLineColor : "rgba(0,0,0,.1)",
scaleShowGridLines : true,
scaleShowLabels : false,
scaleShowHorizontalLines : false,
bezierCurve : false,
scaleOverride : true,
scaleSteps : 5,
scaleStepWidth : 100,
tooltipTemplate: "<%= value %>" + "Guests",
showTooltips: true,
tooltipFillColor: "#0af",
onAnimationComplete: function() {
this.showTooltip(this.datasets[0].points, true);
},
tooltipEvents: []
}
new Chart(c1.getContext("2d")).Line(data1,options1);
Is it possible to only have a tooltip display for a selected datapoint? 是否只能为所选数据点显示工具提示? For instance, I'd like to only have Wednesday where the data is 390 in the array.
例如,我只想在阵列中的数据为星期三的情况下使用390。
Screenshot of desired functionality: http://i.imgur.com/VdH4atw.png 所需功能的屏幕快照: http : //i.imgur.com/VdH4atw.png
Advice is greatly appreciated, thanks! 意见非常感谢,谢谢!
this is the solution https://jsfiddle.net/p2yd6hut/2/ on the function onAnimationComplete i have created a new temp array with the value >= to 390 这是onAnimationComplete函数上的解决方案https://jsfiddle.net/p2yd6hut/2/我创建了一个新的临时数组,值> =到390
onAnimationComplete: function()
{ var tempArr = [];
this.datasets[0].points.forEach(function(point){
if(point.value >= 390){
tempArr.push(point);
}
});
this.showTooltip(tempArr, true);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.