Chart.js ツールチップで表示されたデータをクリックで画面遷移したい

javascript
1
2<!DOCTYPE html>
3<html>
4<body>
5    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
6    <script>
7
8    var ctx = document.getElementById("myChart");
9    var myChart = new Chart(ctx, {
10      type: 'bar',
11      data: {
12          labels: ["2017/1/1", "2017/1/2", "2017/1/3", "2017/1/4", "2017/1/5", "2017/1/6", "2017/1/7", "2017/1/8", "2017/1/9", "2017/1/10"],
13          datasets: [{
14              label: "test1",
15              borderWidth:1,
16              backgroundColor: "#4eadc7",
17              borderColor: "#4eadc7",
18              data: [15678, 16000, 12500, 14000, 15500, 15500, 17000, 12500, 12500, 14000]
19          },
20           {
21              label: "test2",
22              borderWidth:1,
23              backgroundColor: "#e3f417",
24              borderColor: "#e3f417",
25              data: [3490, 3480, 3470, 3460, 3450, 3440, 3430, 3420, 3410, 3400]
26          },{
27              label: "test3",
28              borderWidth:1,
29              backgroundColor: "#ea62ab",
30              borderColor: "#ea62ab",
31              data: [543, 542, 541, 540, 539, 538, 537, 536, 535, 534]
32          },{
33              label: "test4",
34              borderWidth:1,
35              backgroundColor: "#3ad163",
36              borderColor: "#3ad163",
37              data: [4280, 4290, 4300, 4310, 4320, 4330, 4340, 4350, 4360, 4370]
38          }]
39
40      },
41      options: {
42          title: {
43              display: true,
44              text: 'hoge', //グラフの見出し
45              padding:3
46          },
47          scales: {
48              xAxes: [{
49                    stacked: true, //積み上げ棒グラフにする設定
50                    categoryPercentage:0.4 //棒グラフの太さ
51              }],
52              yAxes: [{
53                    stacked: true //積み上げ棒グラフにする設定
54              }]
55          },
56          legend: {
57              labels: {
58                    boxWidth:30,
59                    padding:20 //凡例の各要素間の距離
60              },
61              display: true
62          },
63          events: ['click'],
64          // tooltips custom start
65          tooltips:{
66            mode:'index', //マウスオーバー時に表示されるtooltip
67            // edit default's style
68            backgroundColor:'rgba(201, 209, 195, 0.97)',
69            bodyFontSize:14,
70            bodyFontColor:'#524a4a',
71            borderColor:'rgb(10, 9, 9)',
72            multiKeyBackground:'rgb(10, 9, 9)',
73            borderWidth:0.1,
74              caretSize:5,
75
76            callbacks: {
77                // ヘッダー labels値
78                title: function(tooltipItem, data) {
79                    return data.labels[tooltipItem[0].index];
80                },
81                // 表示項目 各data項目名 + 値
82                label: function(tooltipItem, data) {
83                    return data.datasets[tooltipItem.datasetIndex].label
84                        + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
85                },
86                // フッター data項目の合計値
87                footer: function(tooltipItems, data) {
88                    var sum = 0;
89                    var ele = document.createElement("div");
90                    ele.setAttribute("id", "Div1");
91                    ele.textContent = 'test';
92                    tooltipItems.forEach(function(tooltipItem) {
93                                sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
94                            });
95                    return '全て' + sum;
96                }
97            }
98          }// tooltips custom end
99      }
100  });
101        ctx.addEventListener('click', (e) => console.log(myChart.getElementsAtEvent(e)));
102    </script>
103
104    </body>
105</html>
106

いまここでグラフをクリックするとツールチップが表示されるようになっていますが
このツールチップに表示されている「全て」をクリックすると画面遷移をするようにしたいです。
初心者なんで説明不足があると思いますが、どうかよろしくお願い致します。

行動規範の内容に同意します

回答1件

JavaScript
1ctx.addEventListener('click', (e) => console.log(myChart.getElementsAtEvent(e)));

ここでやっていることと同じように、"全て"と書いてあるタグのIDを指定して
ログを出すかわりにlocation.hrefで遷移するようにしたらいかがでしょうか。

投稿2017/12/18 06:33

sho_jonas

総合スコア77

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Chart.js ツールチップで表示されたデータをクリックで画面遷移したい

関連した質問