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

編集履歴

質問編集履歴

3

「やったこと」を追記

2017/05/16 06:56

投稿

masahiro.o
masahiro.o

スコア16

title CHANGED
File without changes
body CHANGED
@@ -152,6 +152,64 @@
152
152
  </html>
153
153
  ```
154
154
 
155
+ ###やったこと
156
+ 以下のようにcanvasを追加して、描画のロジックも書いてみたのですがダメでした。
157
+ 現在もちょくちょくいじっているのですが、どうもうまくいきません。
158
+ 私の知識がないのが最大の原因なのですが、以下のロジックだと新しく追加したcanvas(myChartAxis2)と
159
+ 前からあったcanvas(myChartAxis)は同じ位置に同じものが描画されてしまいます。
160
+
161
+ - **スタイルの変更**
162
+ 右軸用のcanvas(id=myChartAxis2)定義を追加しました。
163
+ ```
164
+ <style type="text/css">
165
+ .chartWrapper {
166
+ position: relative;
167
+ }
168
+
169
+ .chartWrapper > #myChart, #myChartAxis {
170
+ position: absolute;
171
+ left: 0;
172
+ top: 0;
173
+ pointer-events:none;
174
+ }
175
+
176
+ .chartWrapper > #myChartAxis2 {
177
+ position: absolute;
178
+ top: 0;
179
+ left: 570;
180
+ pointer-events:none;
181
+ }
182
+
183
+ .chartAreaWrapper {
184
+ width: 600px;
185
+ overflow-x: scroll;
186
+
187
+ </style>
188
+ ```
189
+ - **canvasの追加**
190
+ 右軸用のcanvas(id=myChartAxis2 )を追加しました。
191
+ ```
192
+ <!-- グラフの左目盛りを描画しているcanvasです -->
193
+ <canvas id="myChartAxis2" height="300" width="0"></canvas>
194
+ ```
195
+ - **onCompleteにロジック追加**
196
+ ```
197
+ var targetElement2 = document.getElementById("myChartAxis2"),
198
+ copyWidth2 = this.scales["y-axis-2"].width - 10,
199
+ copyHeight2 = this.chart.height + 5,
200
+ targetElementWidth2 = sourceElement.getContext("2d").canvas.clientWidth,
201
+ targetElementHeight2 = sourceElement.getContext("2d").canvas.clientHeight,
202
+ targetCtx2 = targetElement2.getContext("2d");
203
+
204
+ targetCtx2.canvas.top = 0;
205
+ targetCtx2.canvas.left = this.scales["y-axis-2"].left;
206
+ targetCtx2.canvas.width = copyWidth2;
207
+ targetCtx2.canvas.height = copyHeight2;
208
+
209
+ targetCtx2.drawImage(sourceCanvas, this.scales["y-axis-2"].left, 0, copyWidth2, copyHeight2,
210
+ sourceCanvas.left - copyWidth2, 0, copyWidth2, copyHeight2);
211
+ ```
212
+
155
213
  ###問題
156
214
  恥ずかしながらhtml・cssの知識が薄く、もう一つcanvasを用意して(myChartAxis2のような)
157
215
  canvas(id=myChart)の右軸を描画して配置する方法が分かりません。

2

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

2017/05/16 06:56

投稿

masahiro.o
masahiro.o

スコア16

title CHANGED
File without changes
body CHANGED
@@ -1,9 +1,11 @@
1
1
  ###前提・実現したいこと
2
- メインのcanvasにchart.jsでグラフを描画しているのですが、このライブラリにはスクロール機能がないので
2
+ メインのcanvasにchart.jsでグラフを描画しています。
3
+ このライブラリに自体にはスクロール機能がないので、divタグでラッパーを作成しcssで「overflow-x: scroll」を
4
+ 指定する事で横スクロールは可能となります。
3
- 横に長いグラフの場合、軸を描画するcanvasを別に用意して元のグラフの左端に配置し
5
+ このままだとスクロール中は軸の目盛りが見えなくなってしまうので
4
- スクロールしても左にY軸のスコアがついてくるようなサンプルを見つけて実現できました。
6
+ 軸を描画するcanvasを別に用意して元のグラフの左端に配置しスクロールしても左にY軸のスコアがついてくるようなサンプルを見つけて実現できました。
5
7
 
6
- これが2軸グラフになったときに右側にも同じようにY軸のスコアを常時表示したいと思っています。
8
+ これが2軸グラフになったときに右側にも同じようにcanvasを用意して右側のY軸のスコアを常時表示したいと思っています。
7
9
 
8
10
  **html**
9
11
  ```
@@ -36,12 +38,15 @@
36
38
 
37
39
  <div class="chartWrapper">
38
40
  <div class="chartAreaWrapper">
41
+ <!-- chart.jsでグラフを描画しているcanvasです -->
39
42
  <canvas id="myChart" height="300" width="1200"></canvas>
40
43
  </div>
44
+ <!-- グラフの左目盛りを描画しているcanvasです -->
41
45
  <canvas id="myChartAxis" height="300" width="0"></canvas>
42
46
  </div>
43
47
 
44
48
  <script>
49
+ // canvas(myChart)にグラフを描画しています。
45
50
  window.onload = function() {
46
51
  ctx = document.getElementById("myChart").getContext("2d");
47
52
  window.myBar = new Chart(ctx, {
@@ -50,9 +55,8 @@
50
55
  options: complexChartOption,
51
56
  });
52
57
  };
53
- </script>
54
58
 
55
- <script>
59
+ // グラフのデータ定義です。
56
60
  var barChartData = {
57
61
  labels: ['8/26','8/27','8/28','8/29','8/30','8/31','9/1',
58
62
  '9/2','9/3','9/4','9/5','9/6','9/7','9/8',
@@ -89,6 +93,7 @@
89
93
  ],
90
94
  };
91
95
 
96
+ // グラフのオプションです。
92
97
  var complexChartOption = {
93
98
  responsive: false,
94
99
  scales: {
@@ -120,30 +125,26 @@
120
125
  }]
121
126
  },
122
127
  animation: {
123
- duration: 2000,
128
+ // グラフの描画が完了したときに呼び出される関数です。
124
- onComplete: function(data) {
129
+ onComplete: function(data) {
130
+ // グラフの左端にcanvasを配置し、グラフの左側の目盛りを描画しています。
125
- console.log('onComplete Start');
131
+ var sourceCanvas = this.chart.ctx.canvas;
126
132
 
133
+ var getParentIdName = this.chart.canvas.attributes.id.value,
134
+ targetElement = document.getElementById("myChartAxis"),
135
+ sourceElement = document.getElementById("myChart"),
136
+ copyWidth = this.scales["y-axis-1"].width - 10,
127
- console.log(this);
137
+ copyHeight = this.chart.height + 5,
138
+ targetElementWidth = sourceElement.getContext("2d").canvas.clientWidth,
139
+ targetElementHeight = sourceElement.getContext("2d").canvas.clientHeight,
140
+ targetCtx = targetElement.getContext("2d");
128
141
 
129
- var sourceCanvas = this.chart.ctx.canvas;
130
142
 
131
- var getParentIdName = this.chart.canvas.attributes.id.value,
132
- targetElement = document.getElementById("myChartAxis"),
133
- sourceElement = document.getElementById("myChart"),
134
- copyWidth = this.scales["y-axis-1"].width - 10,
135
- copyHeight = this.chart.height + 5,
136
- targetElementWidth = sourceElement.getContext("2d").canvas.clientWidth,
137
- targetElementHeight = sourceElement.getContext("2d").canvas.clientHeight,
138
- targetCtx = targetElement.getContext("2d");
139
-
140
-
141
- targetCtx.canvas.width = copyWidth;
143
+ targetCtx.canvas.width = copyWidth;
142
- targetCtx.canvas.height = copyHeight;
144
+ targetCtx.canvas.height = copyHeight;
143
- targetCtx.drawImage(sourceCanvas, 0, 0, targetElementWidth, targetElementHeight);
145
+ targetCtx.drawImage(sourceCanvas, 0, 0, targetElementWidth, targetElementHeight);
144
-
145
-
146
+
146
- }
147
+ }
147
148
  }
148
149
  };
149
150
  </script>

1

タグにJavaScriptを追加しました

2017/05/16 05:58

投稿

masahiro.o
masahiro.o

スコア16

title CHANGED
File without changes
body CHANGED
File without changes