【问题标题】:Display a single tooltip with Chart.JS?使用 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

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

【问题讨论】:

    标签: javascript chart.js


    【解决方案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,祝你好运!!!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-10-28
    • 1970-01-01
    • 1970-01-01
    • 2021-01-15
    • 1970-01-01
    相关资源
    最近更新 更多