teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問<javascript>wheel eventをdispatchEventした場合のx,y座標の指定方法について

編集履歴

質問編集履歴

4

文言の修正

2020/10/18 01:35

投稿

s3j5k4
s3j5k4

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,8 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- グラフを描画するchart.jsを使用しております。
3
+ グラフを描画するChart.jsを使用しております。
4
-
4
+
5
- ホイールスクロールでマウスのあるx,y座標を基準にグラフの拡大・縮小を行うことができます。
5
+ Pluginを利用することで、マウスのあるx,y座標を基準にマウスホイールでグラフの拡大・縮小を行うことができます。
6
6
 
7
7
 
8
8
 
@@ -118,7 +118,7 @@
118
118
 
119
119
  再現いただけるコードを準備しました。
120
120
 
121
- 以下のコードで表示されるグラフについて、ボタンを押すと<canvas id="myChart">の左上をホイールスクロールにて縮小している動作となります。これを、何とかして画面の真ん中でホイールスクロールしている扱いにできないかと苦戦しています。
121
+ 以下のコードで表示されるグラフについて、ボタンを押すと<canvas id="myChart">の左上をマウスホイールにて縮小している動作となります。これを、何とかして画面の真ん中でマウスホイールしている扱いにできないかと苦戦しています。
122
122
 
123
123
 
124
124
 

3

コードの追記

2020/10/18 01:35

投稿

s3j5k4
s3j5k4

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- グラフを描画するcharat.jsを使用しております。
3
+ グラフを描画するchart.jsを使用しております。
4
4
 
5
5
  ホイールスクロールでマウスのあるx,y座標を基準にグラフの拡大・縮小を行うことができます。
6
6
 
@@ -14,6 +14,8 @@
14
14
 
15
15
  ### 該当のソースコード
16
16
 
17
+ ```
18
+
17
19
  $(document).on("click", '#button', function () {
18
20
 
19
21
  var evt = document.createEvent('MouseEvents');
@@ -26,10 +28,16 @@
26
28
 
27
29
  });
28
30
 
31
+ ```
32
+
33
+
34
+
29
35
  ### 試したこと
30
36
 
31
37
  上記のコードに★マーク（値は適当）を追加しましたが、効きませんでした。
32
38
 
39
+ ```ここに言語を入力
40
+
33
41
  evt.deltaY = -100;
34
42
 
35
43
  ★evt.offsetX = 300;　
@@ -38,6 +46,8 @@
38
46
 
39
47
  document.getElementById("myChart").dispatchEvent(evt);
40
48
 
49
+ ```
50
+
41
51
 
42
52
 
43
53
 
@@ -58,28 +68,42 @@
58
68
 
59
69
  htmlコード
60
70
 
71
+ ```
72
+
61
73
  <canvas id='myChart'></canvas>
62
74
 
63
75
  <button id="button">ボタン</button>
64
76
 
77
+ ```
78
+
79
+
80
+
65
81
 
66
82
 
67
83
  chartを生成するjavascriptコード
68
84
 
85
+ ```ここに言語を入力
86
+
69
87
  $(function(){
70
88
 
71
- ctx = document.getElementById('myChart').getContext('2d');
89
+ ctx = document.getElementById('myChart').getContext('2d');
72
-
90
+
73
- config= {　//各種設定 };
91
+ config= {　//各種設定 };
74
-
92
+
75
- myChart = new Chart(ctx,config); //---myChartの生成
93
+ myChart = new Chart(ctx,config); //---myChartの生成
76
94
 
77
95
  };
78
96
 
97
+ ```
98
+
99
+
100
+
79
101
 
80
102
 
81
103
  chart描画後のhtmlソース
82
104
 
105
+ ```ここに言語を入力
106
+
83
107
  <div id="chart_view">
84
108
 
85
109
  <canvas id="myChart" style="display: block; touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); class="chartjs-render-monitor">
@@ -87,3 +111,195 @@
87
111
  </canvas>
88
112
 
89
113
  </div>
114
+
115
+ ```
116
+
117
+ ### 追記2
118
+
119
+ 再現いただけるコードを準備しました。
120
+
121
+ 以下のコードで表示されるグラフについて、ボタンを押すと<canvas id="myChart">の左上をホイールスクロールにて縮小している動作となります。これを、何とかして画面の真ん中でホイールスクロールしている扱いにできないかと苦戦しています。
122
+
123
+
124
+
125
+ ```ここに言語を入力
126
+
127
+ <!DOCTYPE html>
128
+
129
+ <html lang="ja">
130
+
131
+
132
+
133
+ <head>
134
+
135
+ <meta charset="utf-8">
136
+
137
+ 　<title>グラフ</title>
138
+
139
+ <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
140
+
141
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js?<?php echo time(); ?>"></script>
142
+
143
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js?<?php echo time(); ?>"></script>
144
+
145
+ <script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js'></script>
146
+
147
+ <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.4"></script>
148
+
149
+
150
+
151
+ </head>
152
+
153
+
154
+
155
+ <body>
156
+
157
+ <h1>折れ線グラフ</h1>
158
+
159
+ <canvas id="myChart"></canvas>
160
+
161
+ <button id="button">ボタン</button>
162
+
163
+
164
+
165
+ <script>
166
+
167
+ $(function(){
168
+
169
+ ctx = document.getElementById('myChart').getContext('2d');
170
+
171
+ ctx.canvas.height = 100;
172
+
173
+ var config = {
174
+
175
+ type: 'line',
176
+
177
+ data: {
178
+
179
+ labels: ['8月1日', '8月2日', '8月3日', '8月4日', '8月5日', '8月6日', '8月7日'],
180
+
181
+ datasets: [
182
+
183
+ {
184
+
185
+ label: '最高気温(度）',
186
+
187
+ data: [35, 34, 37, 35, 34, 35, 34, 25],
188
+
189
+ borderColor: "rgba(255,0,0,1)",
190
+
191
+ backgroundColor: "rgba(0,0,0,0)"
192
+
193
+ },
194
+
195
+ {
196
+
197
+ label: '最低気温(度）',
198
+
199
+ data: [25, 27, 27, 25, 26, 27, 25, 21],
200
+
201
+ borderColor: "rgba(0,0,255,1)",
202
+
203
+ backgroundColor: "rgba(0,0,0,0)"
204
+
205
+ }
206
+
207
+ ],
208
+
209
+ },
210
+
211
+ options: {
212
+
213
+ title: {
214
+
215
+ display: true,
216
+
217
+ text: '気温（8月1日~8月7日）'
218
+
219
+ },
220
+
221
+ scales: {
222
+
223
+ yAxes: [{
224
+
225
+ type: 'linear',
226
+
227
+ ticks: {
228
+
229
+ suggestedMax: 40,
230
+
231
+ suggestedMin: 0,
232
+
233
+ stepSize: 10,
234
+
235
+ callback: function(value, index, values){
236
+
237
+ return value + '度'
238
+
239
+ }
240
+
241
+ }
242
+
243
+ }]
244
+
245
+ },
246
+
247
+ pan: {
248
+
249
+ enabled: true,
250
+
251
+ mode: 'xy',
252
+
253
+ },
254
+
255
+ zoom: {
256
+
257
+ enabled: true,
258
+
259
+ mode: 'xy',
260
+
261
+ },
262
+
263
+ zoom: {
264
+
265
+ enabled: true,
266
+
267
+ mode: 'xy',
268
+
269
+ }
270
+
271
+ }
272
+
273
+ };
274
+
275
+
276
+
277
+ myChart = new Chart(ctx,config);
278
+
279
+
280
+
281
+ $(document).on("click", '#button', function () {
282
+
283
+ var evt = document.createEvent('MouseEvents');
284
+
285
+ evt.initEvent('wheel', true, true);
286
+
287
+ evt.deltaY = 100;
288
+
289
+ document.getElementById("myChart").dispatchEvent(evt);
290
+
291
+ });
292
+
293
+ });
294
+
295
+
296
+
297
+ </script>
298
+
299
+ </body>
300
+
301
+
302
+
303
+ </html>
304
+
305
+ ```

2

htmlコードの追加

2020/10/18 01:29

投稿

s3j5k4
s3j5k4

スコア1

test CHANGED
File without changes
test CHANGED
@@ -51,3 +51,39 @@
51
51
 
52
52
 
53
53
  の形式でscreenX,screenYの値を設定してみましたが、効きませんでした。
54
+
55
+
56
+
57
+ ### 追記
58
+
59
+ htmlコード
60
+
61
+ <canvas id='myChart'></canvas>
62
+
63
+ <button id="button">ボタン</button>
64
+
65
+
66
+
67
+ chartを生成するjavascriptコード
68
+
69
+ $(function(){
70
+
71
+ ctx = document.getElementById('myChart').getContext('2d');
72
+
73
+ config= {　//各種設定 };
74
+
75
+ myChart = new Chart(ctx,config); //---myChartの生成
76
+
77
+ };
78
+
79
+
80
+
81
+ chart描画後のhtmlソース
82
+
83
+ <div id="chart_view">
84
+
85
+ <canvas id="myChart" style="display: block; touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); class="chartjs-render-monitor">
86
+
87
+ </canvas>
88
+
89
+ </div>

1

試したことの追加

2020/10/18 00:07

投稿

s3j5k4
s3j5k4

スコア1

test CHANGED
File without changes
test CHANGED
@@ -28,6 +28,22 @@
28
28
 
29
29
  ### 試したこと
30
30
 
31
+ 上記のコードに★マーク（値は適当）を追加しましたが、効きませんでした。
32
+
33
+ evt.deltaY = -100;
34
+
35
+ ★evt.offsetX = 300;　
36
+
37
+ ★evt.offsetY = 300;　
38
+
39
+ document.getElementById("myChart").dispatchEvent(evt);
40
+
41
+
42
+
43
+
44
+
45
+ また、
46
+
31
47
 
32
48
 
33
49
  evt.initMouseEvent ("wheel",...