使用 Chart.JS 显示单个工具提示？

Posted 2023-02-21

【中文标题】使用 Chart.JS 显示单个工具提示？

【英文标题】：Display a single tooltip with Chart.JS?

【发布时间】：2015-08-22 05:04:18

【问题描述】：

我使用 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

非常感谢您的建议，谢谢！

【参考方案1】：

这是解决方案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);          
    

【讨论】：

谢谢@fermin-perdomo，这完成了我在这种情况下寻找的东西！为了可持续发展，是否可以改为针对标签？我在这个解决方案中看到的唯一问题是，如果有多个 390 值，则会显示每个值的工具提示。我对这个概念的最终使用将使显示的工具提示根据星期几发生变化。

欢迎您。是的，你可以用它来获取目标标签point.label，祝你好运！！！