teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問【jQuery】Chart上のクリックした任意のx軸の値を取得したい

編集履歴

質問編集履歴

1

再調査していくなかで、変更しました

2020/10/17 12:26

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -10,23 +10,23 @@
10
10
 
11
11
  --------------------------
12
12
 
13
- SQLDataSourceの結果をStackedBar100を使って表示しています。
13
+ SQLDataSourceの結果をStackedBar100で表現し、URLで遷移できるようにしたいです。
14
+
15
+ これをchart.jsを使って実現しようとしています。
14
16
 
15
17
 
16
18
 
17
- インターネットの例を見よう見まねでやると、うまくいきます。
19
+ 調べてみると、
18
20
 
19
- ネットの例では、使うデータはSQLDataSourceから呼び出されたものではなく、datasetsに[12, 19, 3, 5, 2, 3]といった形で定義されています。またhtmlのタグではcanvasタグを使っていました。
21
+ chart.jsで実現するためには、canvasタグで囲まないといけないようなので、
20
22
 
21
- （<canvas id="Chart1"></canvas>）
23
+ $("#Chart1").wrapAll($("<canvas id=" + "Chart1"+ "></canvas>"));
24
+
25
+ と記述しました。
22
26
 
23
27
 
24
28
 
25
- そこで、私が作っているプログラムでもcanvasで囲むべく、
26
-
27
- $("#Chart1").prepend($("<canvas></canvas>"));
28
-
29
- を書いたのですが、どうやら違うようでした。
29
+ しかし、うまくいきませんでした。
30
30
 
31
31
 
32
32
 
@@ -38,7 +38,7 @@
38
38
 
39
39
  <body>
40
40
 
41
- <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.1/dist/Chart.min.js"></script>
41
+ <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
42
42
 
43
43
 
44
44
 
@@ -46,55 +46,33 @@
46
46
 
47
47
  $(document).ready(function () {
48
48
 
49
- $("#Chart1").prepend($("<canvas></canvas>"));
49
+ $("#Chart1").wrapAll($("<canvas id=" + "Chart1"+ "></canvas>"));
50
50
 
51
- var ctx = document.getElementById("myChart").getContext('2d');
51
+ const ctx = document.getElementById('Chart1').getContext('2d');
52
+
53
+ const chart = new Chart(ctx, {
54
+
55
+ type: 'stackedbar100',
56
+
57
+ });
58
+
59
+ document.getElementById('Chart1').addEventListener('click', e => {
60
+
61
+ const elements = chart.getElementAtEvent(e);
62
+
63
+ if (elements.length) {
64
+
65
+ alert(`${elements[0]._index}: ${elements[0]._model.label}`);
66
+
67
+ }
68
+
69
+ });
70
+
71
+ });
52
72
 
53
73
 
54
74
 
55
- var myChart = new Chart(ctx, {
75
+
56
-
57
- type: 'stackedbar100',
58
-
59
-
60
-
61
- options: {
62
-
63
- scales: {
64
-
65
- yAxes: [{
66
-
67
- ticks: {
68
-
69
- beginAtZero: true
70
-
71
- }
72
-
73
- }]
74
-
75
- },
76
-
77
- events: ['click'],
78
-
79
- onHover: function (e, el) {
80
-
81
- if (!el || el.length === 0) return;
82
-
83
- console.log('onHover : label ' + el[0]._model.label);
84
-
85
- },
86
-
87
- onClick: function (e, el) {
88
-
89
- if (!el || el.length === 0) return;
90
-
91
- console.log('onClick : label ' + el[0]._model.label);
92
-
93
- }
94
-
95
- }
96
-
97
- });
98
76
 
99
77
  </script>
100
78