teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問canvasの重ね描画方法について

編集履歴

質問編集履歴

3

「やったこと」を追記

2017/05/16 06:56

投稿

masahiro.o
masahiro.o

スコア16

test CHANGED
File without changes
test CHANGED
@@ -306,6 +306,122 @@
306
306
 
307
307
 
308
308
 
309
+ ###やったこと
310
+
311
+ 以下のようにcanvasを追加して、描画のロジックも書いてみたのですがダメでした。
312
+
313
+ 現在もちょくちょくいじっているのですが、どうもうまくいきません。
314
+
315
+ 私の知識がないのが最大の原因なのですが、以下のロジックだと新しく追加したcanvas(myChartAxis2)と
316
+
317
+ 前からあったcanvas(myChartAxis)は同じ位置に同じものが描画されてしまいます。
318
+
319
+
320
+
321
+ - **スタイルの変更**
322
+
323
+ 右軸用のcanvas(id=myChartAxis2)定義を追加しました。
324
+
325
+ ```
326
+
327
+ <style type="text/css">
328
+
329
+ .chartWrapper {
330
+
331
+ position: relative;
332
+
333
+ }
334
+
335
+
336
+
337
+ .chartWrapper > #myChart, #myChartAxis {
338
+
339
+ position: absolute;
340
+
341
+ left: 0;
342
+
343
+ top: 0;
344
+
345
+ pointer-events:none;
346
+
347
+ }
348
+
349
+
350
+
351
+ .chartWrapper > #myChartAxis2 {
352
+
353
+ position: absolute;
354
+
355
+ top: 0;
356
+
357
+ left: 570;
358
+
359
+ pointer-events:none;
360
+
361
+ }
362
+
363
+
364
+
365
+ .chartAreaWrapper {
366
+
367
+ width: 600px;
368
+
369
+ overflow-x: scroll;
370
+
371
+
372
+
373
+ </style>
374
+
375
+ ```
376
+
377
+ - **canvasの追加**
378
+
379
+ 右軸用のcanvas(id=myChartAxis2 )を追加しました。
380
+
381
+ ```
382
+
383
+ <!-- グラフの左目盛りを描画しているcanvasです -->
384
+
385
+ <canvas id="myChartAxis2" height="300" width="0"></canvas>
386
+
387
+ ```
388
+
389
+ - **onCompleteにロジック追加**
390
+
391
+ ```
392
+
393
+ var targetElement2 = document.getElementById("myChartAxis2"),
394
+
395
+ copyWidth2 = this.scales["y-axis-2"].width - 10,
396
+
397
+ copyHeight2 = this.chart.height + 5,
398
+
399
+ targetElementWidth2 = sourceElement.getContext("2d").canvas.clientWidth,
400
+
401
+ targetElementHeight2 = sourceElement.getContext("2d").canvas.clientHeight,
402
+
403
+ targetCtx2 = targetElement2.getContext("2d");
404
+
405
+
406
+
407
+ targetCtx2.canvas.top = 0;
408
+
409
+ targetCtx2.canvas.left = this.scales["y-axis-2"].left;
410
+
411
+ targetCtx2.canvas.width = copyWidth2;
412
+
413
+ targetCtx2.canvas.height = copyHeight2;
414
+
415
+
416
+
417
+ targetCtx2.drawImage(sourceCanvas, this.scales["y-axis-2"].left, 0, copyWidth2, copyHeight2,
418
+
419
+ sourceCanvas.left - copyWidth2, 0, copyWidth2, copyHeight2);
420
+
421
+ ```
422
+
423
+
424
+
309
425
  ###問題
310
426
 
311
427
  恥ずかしながらhtml・cssの知識が薄く、もう一つcanvasを用意して(myChartAxis2のような)

2

「前提・実現したいこと」を少し書き直して、ソース内にも多少コメントを付与しました。

2017/05/16 06:56

投稿

masahiro.o
masahiro.o

スコア16

test CHANGED
File without changes
test CHANGED
@@ -1,14 +1,18 @@
1
1
  ###前提・実現したいこと
2
2
 
3
- メインのcanvasにchart.jsでグラフを描画しているのですが、このライブラリにはスクロール機能がないので
3
+ メインのcanvasにchart.jsでグラフを描画しています。
4
+
4
-
5
+ このライブラリに自体にはスクロール機能がないので、divタグでラッパーを作成しcssで「overflow-x: scroll」を
6
+
7
+ 指定する事で横スクロールは可能となります。
8
+
5
- 横に長いグラフの場合、軸を描画するcanvasを別に用意して元のグラフの左端に配置し
9
+ このままだとスクロール中は軸の目盛りが見えなくなってしまうので
6
-
10
+
7
- スクロールしても左にY軸のスコアがついてくるようなサンプルを見つけて実現できました。
11
+ 軸を描画するcanvasを別に用意して元のグラフの左端に配置しスクロールしても左にY軸のスコアがついてくるようなサンプルを見つけて実現できました。
8
-
9
-
10
-
12
+
13
+
14
+
11
- これが2軸グラフになったときに右側にも同じようにY軸のスコアを常時表示したいと思っています。
15
+ これが2軸グラフになったときに右側にも同じようにcanvasを用意して右側のY軸のスコアを常時表示したいと思っています。
12
16
 
13
17
 
14
18
 
@@ -74,10 +78,14 @@
74
78
 
75
79
  <div class="chartAreaWrapper">
76
80
 
81
+ <!-- chart.jsでグラフを描画しているcanvasです -->
82
+
77
83
  <canvas id="myChart" height="300" width="1200"></canvas>
78
84
 
79
85
  </div>
80
86
 
87
+ <!-- グラフの左目盛りを描画しているcanvasです -->
88
+
81
89
  <canvas id="myChartAxis" height="300" width="0"></canvas>
82
90
 
83
91
  </div>
@@ -86,6 +94,8 @@
86
94
 
87
95
  <script>
88
96
 
97
+ // canvas(myChart)にグラフを描画しています。
98
+
89
99
  window.onload = function() {
90
100
 
91
101
  ctx = document.getElementById("myChart").getContext("2d");
@@ -102,11 +112,9 @@
102
112
 
103
113
  };
104
114
 
115
+
116
+
105
- </script>
117
+ // グラフのデータ定義です。
106
-
107
-
108
-
109
- <script>
110
118
 
111
119
  var barChartData = {
112
120
 
@@ -180,6 +188,8 @@
180
188
 
181
189
 
182
190
 
191
+ // グラフのオプションです。
192
+
183
193
  var complexChartOption = {
184
194
 
185
195
  responsive: false,
@@ -242,53 +252,45 @@
242
252
 
243
253
  animation: {
244
254
 
245
- duration: 2000,
255
+ // グラフの描画が完了したときに呼び出される関数です。
246
-
256
+
247
- onComplete: function(data) {
257
+ onComplete: function(data) {
248
-
258
+
249
- console.log('onComplete Start');
259
+ // グラフの左端にcanvasを配置し、グラフの左側の目盛りを描画しています。
250
-
251
-
252
-
253
- console.log(this);
260
+
254
-
255
-
256
-
257
- var sourceCanvas = this.chart.ctx.canvas;
261
+ var sourceCanvas = this.chart.ctx.canvas;
258
-
259
-
260
-
262
+
263
+
264
+
261
- var getParentIdName = this.chart.canvas.attributes.id.value,
265
+ var getParentIdName = this.chart.canvas.attributes.id.value,
262
-
266
+
263
- targetElement = document.getElementById("myChartAxis"),
267
+ targetElement = document.getElementById("myChartAxis"),
264
-
268
+
265
- sourceElement = document.getElementById("myChart"),
269
+ sourceElement = document.getElementById("myChart"),
266
-
270
+
267
- copyWidth = this.scales["y-axis-1"].width - 10,
271
+ copyWidth = this.scales["y-axis-1"].width - 10,
268
-
272
+
269
- copyHeight = this.chart.height + 5,
273
+ copyHeight = this.chart.height + 5,
270
-
274
+
271
- targetElementWidth = sourceElement.getContext("2d").canvas.clientWidth,
275
+ targetElementWidth = sourceElement.getContext("2d").canvas.clientWidth,
272
-
276
+
273
- targetElementHeight = sourceElement.getContext("2d").canvas.clientHeight,
277
+ targetElementHeight = sourceElement.getContext("2d").canvas.clientHeight,
274
-
278
+
275
- targetCtx = targetElement.getContext("2d");
279
+ targetCtx = targetElement.getContext("2d");
276
-
277
-
278
-
279
-
280
-
280
+
281
+
282
+
283
+
284
+
281
- targetCtx.canvas.width = copyWidth;
285
+ targetCtx.canvas.width = copyWidth;
282
-
286
+
283
- targetCtx.canvas.height = copyHeight;
287
+ targetCtx.canvas.height = copyHeight;
284
-
288
+
285
- targetCtx.drawImage(sourceCanvas, 0, 0, targetElementWidth, targetElementHeight);
289
+ targetCtx.drawImage(sourceCanvas, 0, 0, targetElementWidth, targetElementHeight);
286
-
287
-
288
-
289
-
290
-
290
+
291
+
292
+
291
- }
293
+ }
292
294
 
293
295
  }
294
296
 

1

タグにJavaScriptを追加しました

2017/05/16 05:58

投稿

masahiro.o
masahiro.o

スコア16

test CHANGED
File without changes
test CHANGED
File without changes