グループ化された横棒グラフは次のとおりです。
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]
コメントを追加