xの値や各ツールチップで使用されるその他の値など、オブジェクトの配列をデータとしてグラフデータに渡そうとしています。
私のデータ配列では、各オブジェクトにxとvalue変数の値が含まれています。私は、このアクセスしたいvalueの内部をtooltips、最終的に各グラフのデータのときにマウスホバーを表示されるツールヒント内の値を表示します。
これが私のコードです：
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['2017/06/12', '2017/06/23', '2017/07/12', '2017/07/23', '2017/08/12', '2017/08/23', '2017/09/12'],
datasets: [{
label: 'Values',
data: [{
y: 12,
value: 12
},
{
y: 3,
value: 13
},
{
y: 1,
value: 15
},
{
y: -3,
value: 5
},
{
y: 67,
value: 18
},
{
y: 12,
value: 11
},
{
y: 13,
value: 19
}
],
fill: false,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 2
}]
},
options: {
tooltips: {
// HERE I WANT TO ACCESS VALUE VARIABLE AND DISPLAY IT IN TOOLTIP
},
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
Chart.jsツールチップのドキュメントには、特定のデータポイントに表示されるテキストを指定する方法を示すラベルコールバックに関するセクションがあります。次のパラメータで提供される関数を作成する必要があります。
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return '...';
}
}
}
ツールチップアイテムインターフェイスのセクションには、を介してコールバックに渡される情報が表示されますtooltipItem。ここで重要なのは、datasetIndex（アイテムが由来するデータセットのindexインデックス）と（データセット内のこのデータアイテムのインデックス）です。これらを使用すると、内の正しいアイテムにアクセスできますdata。
これをまとめるyとvalue、ツールチップにアクセスして表示する非常に簡単な例になります。
フィドル（エラーの原因であるbackgroundColor/borderColor削除）：
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var item = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return item.y + ' ' + item.value;
}
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加