回答編集履歴
3
answer
CHANGED
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
１. 上記コードのうち、label:の直下でコメントになっているconsole.log～2行の行頭コメント//を外しておきます。
|
|
44
44
|
２. ページを更新してグラフをブラウザに表示させます。
|
|
45
45
|
３. ブラウザのDeveloper toolsを表示させConsoleウィンドウを表示します。
|
|
46
|
-
４. 図のように、グラフの**黄色**のエリアにマウ
|
|
46
|
+
４. 図のように、グラフの**黄色**のエリアにマウスポインタを当てます。 （黄色は「Feb」つまり2番目のデータ）
|
|
47
47
|
|
|
48
48
|
|
|
49
49
|
５. このとき直近のConsoleウィンドウにログがずらずら表示されますが、**一番下の２行**に注目します。（図）
|
|
@@ -70,10 +70,10 @@
|
|
|
70
70
|
|
|
71
71
|
|
|
72
72
|
|
|
73
|
-
１０．したがって、さきほどの配列labelsのインデックス
|
|
73
|
+
１０．したがって、さきほどの配列data.labelsのインデックスには、tooltipItem.index を指定すればよいことがわかります。
|
|
74
74
|
|
|
75
75
|
１１．上記をまとめると
|
|
76
76
|
```
|
|
77
77
|
data.labels[tooltipItem.index]
|
|
78
78
|
```
|
|
79
|
-
と書けば、それぞれのエリアに対応したラベル（Jan,Feb,Mar）にアクセスできることがわかります。
|
|
79
|
+
と書けば、それぞれのエリアに対応したラベル（"Jan","Feb","Mar"）にアクセスできることがわかります。
|
2
追記
answer
CHANGED
|
@@ -5,11 +5,15 @@
|
|
|
5
5
|
return `My Title`;
|
|
6
6
|
},
|
|
7
7
|
label: (tooltipItem, data) => { //時間を計算する
|
|
8
|
+
+ // console.log("tooltipItem", tooltipItem);
|
|
9
|
+
+ // console.log("data", data);
|
|
8
10
|
let time_label = Math.floor(`${(data.datasets[0].data[tooltipItem.index] / 60)}`) + ":" + ('00' + `${(data.datasets[0].data[tooltipItem.index] % 60)}`).slice(-2);
|
|
9
11
|
- return `${tooltipItem.label}: ${time_label}`; //★★★ ここの引数の値がわからない
|
|
10
12
|
+ return `${data.labels[tooltipItem.index]}: ${time_label}`;
|
|
11
13
|
},
|
|
12
14
|
footer: function(tooltipItem, data) {
|
|
15
|
+
+ // console.log("footer:tooltipItem", tooltipItem);
|
|
16
|
+
+ // console.log("footer:data", data);
|
|
13
17
|
let total = 0 // 合計格納
|
|
14
18
|
- let indexItem = data.datasets[0].data[tooltipItem.index] // マウスを当てたデータ
|
|
15
19
|
+ let indexItem = data.datasets[0].data[tooltipItem[0].index] // マウスを当てたデータ
|
|
@@ -25,9 +29,51 @@
|
|
|
25
29
|
|
|
26
30
|
},
|
|
27
31
|
```
|
|
28
|
-
|
|
32
|
+
------
|
|
29
33
|
調べる方法として、
|
|
30
34
|
label: (tooltipItem, data)
|
|
31
35
|
等の直後に
|
|
36
|
+
```
|
|
37
|
+
console.log("tooltipItem", tooltipItem);
|
|
32
|
-
|
|
38
|
+
console.log("data", data);
|
|
39
|
+
```
|
|
33
|
-
と入れて、ブラウザのDevelopers Toolのconsoleウィンドウを見ます。
|
|
40
|
+
と入れて、ブラウザのDevelopers Toolのconsoleウィンドウを見ます。
|
|
41
|
+
|
|
42
|
+
例）
|
|
43
|
+
１. 上記コードのうち、label:の直下でコメントになっているconsole.log～2行の行頭コメント//を外しておきます。
|
|
44
|
+
２. ページを更新してグラフをブラウザに表示させます。
|
|
45
|
+
３. ブラウザのDeveloper toolsを表示させConsoleウィンドウを表示します。
|
|
46
|
+
４. 図のように、グラフの**黄色**のエリアにマウシポインタを当てます。 （黄色は「Feb」つまり2番目のデータ）
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
５. このとき直近のConsoleウィンドウにログがずらずら表示されますが、**一番下の２行**に注目します。（図）
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
６. 「toolTipItem」 と 「data」それぞれの右隣りの三角形をクリックして展開し、下図のような状態にします。
|
|
53
|
+
[toolTipItem]
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
[data] （datasets とその中の 0 および labelsを展開する）
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
７. 今回、黄色エリアのラベルとして取得したいのは、「Feb」というラベル表示です。
|
|
61
|
+
先ほど展開したオブジェクトを見ると、data の中で"Feb"という表示を持っている場所は、
|
|
62
|
+
data -> labels という配列の中の インデックス 1 であることが分かります。
|
|
63
|
+
したがって、コード中で「data.labels[1] 」と書けば「Feb」と表示できるはずです。
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
８. この「1」というインデックスは、マウスをポイントするエリアに合わせて切り替えないといけません。（仮にコード中に return data.labels[1] と書いてしまうと 全てのエリアで「Feb」と表示されてしまいます）したがって、あとは**ポイントしたエリア毎に変化するindex値**がどこにあるかを探せばよい、ということになります。
|
|
67
|
+
|
|
68
|
+
９. マウスを動かして色々試すことで、**tooltipItemの中の「index」**が、このエリア毎に変化するindex値に対応していることが分かります。
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
１０．したがって、さきほどの配列labelsのインデックス（）には、tooltipItem.index を書けばよいことがわかります。
|
|
74
|
+
|
|
75
|
+
１１．上記をまとめると
|
|
76
|
+
```
|
|
77
|
+
data.labels[tooltipItem.index]
|
|
78
|
+
```
|
|
79
|
+
と書けば、それぞれのエリアに対応したラベル（Jan,Feb,Mar）にアクセスできることがわかります。
|
1
answer
CHANGED
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
```
|
|
28
28
|
|
|
29
29
|
調べる方法として、
|
|
30
|
-
|
|
30
|
+
label: (tooltipItem, data)
|
|
31
|
-
の直後に
|
|
31
|
+
等の直後に
|
|
32
32
|
`console.log(tooltipItem, data);`
|
|
33
33
|
と入れて、ブラウザのDevelopers Toolのconsoleウィンドウを見ます。
|