gpt4 book ai didi

javascript - 使用 Chart.JS 显示单个工具提示?

转载 作者:行者123 更新时间:2023-11-30 16:49:49 26 4
gpt4 key购买 nike

我使用 Chart.JS 制作了一个图表,我希望将工具提示显示限制为 1 个点。我有一个工作演示,其中当前显示了所有工具提示,可以在此处查看: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);

是否可以只为选定的数据点显示工具提示?例如,我希望只有星期三,数组中的数据为 390。

所需功能的屏幕截图:http://i.imgur.com/VdH4atw.png

非常感谢您的建议,谢谢!

最佳答案

这就是解决方案 https://jsfiddle.net/p2yd6hut/2/在 onAnimationComplete 函数上,我创建了一个新的临时数组,其值 >= 到 390

onAnimationComplete: function()
{ var tempArr = [];
this.datasets[0].points.forEach(function(point){
if(point.value >= 390){
tempArr.push(point);
}
});
this.showTooltip(tempArr, true);
}

关于javascript - 使用 Chart.JS 显示单个工具提示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30697147/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com