Chart.JSで単一のツールチップを表示しますか？

debugcn 投稿 Dev

ダレン

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

アドバイスは大歓迎です、ありがとう！

フェルミン・ペルドモ

これは、関数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);          
    }

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]