Chart.js 2.7.0グループ化された水平棒グラフ、グループ全体ではなく1つの棒のデータを表示するツールチップを取得するにはどうすればよいですか?

見ているだけ

グループ化された横棒グラフは次のとおりです。

http://jsfiddle.net/jmpxgufu/185/

var ctx = document.getElementById( "myChart")。getContext( "2d");

        var chart = {
        options: {
        scales: {
                 yAxes: [{ barPercentage: 1.0 }],
          },
      tooltips: {
         callbacks: {
            label: function(tooltipItem, data) {
console.log(tooltipItem);
           return data.datasets[tooltipItem.datasetIndex].label +': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();
}
}
},          
          responsive: true,
          maintainAspectRatio: false,
          animation: {

                    onComplete: function(animation) {
                    }
                }
      },
        type: 'horizontalBar',
        data: {
            labels: ['Topic1'],
      datasets: [
      {
         label: 'Something',
         borderColor: 'blue',
         borderWidth: 1,
         backgroundColor: Color('blue').alpha(0.5).rgbString(),
         data: [40],
         fill: false
      },
      {
         label: 'Something else',
         borderColor: 'orange',
         borderWidth: 1,
         backgroundColor: Color('orange').alpha(0.5).rgbString(),
         data: [17],
         fill: false
      }
      ]
        }};

   var myLiveChart = new Chart(ctx, chart);

グラフを見ると、「Topic1」というラベルに関連付けられた2つのバー(オレンジと青)があります。

オレンジ色のバーだけにカーソルを合わせると、次のように表示されます。

Topic1
Something: 40
Something else: 17

青いバーだけにカーソルを合わせると、次のように表示されます。

Topic1
Something: 40
Something else: 17

また、グループに2つのバーがあるため、関数が2回実行され、返される文字列を取得して、この「グループ化された」ツールチップメッセージを形成します(実行されていることを示すためにconsole.logをそこに配置します)。 2回)。

ホバーしているバーのデータのみが必要です。

オレンジ色のバーだけにカーソルを合わせると、次のように表示されます。

Topic1
Something else: 17

青いバーだけにカーソルを合わせると、次のように表示されます。

Topic1
Something: 40

しかし、どちらがアクティブなバーであるかを判断する方法がわかりません(2つのうち)。

ここで何が欠けていますか?

ɢʀᴜɴᴛ

目的の動作を得るには、ツールチップmode/に設定する必要がありますnearest point

tooltips: {
   mode: 'nearest'
}

ドキュメントから

#最寄りの
地点に最も近い項目を取得します。最も近いアイテムは、チャートアイテムの中心(ポイント、バー)までの距離に基づいて決定されます。2つ以上のアイテムが同じ距離にある場合は、面積が最も小さいアイテムが使用されます。交差がtrueの場合、これは、マウスの位置がグラフ内のアイテムと交差したときにのみトリガーされます。これは、ポイントがバーの後ろに隠れているコンボチャートに非常に役立ちます。

これが作業中のフィドルです。

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

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

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ