teratail
回答率
85.49%
質問するログイン新規登録
トップに関する質問Chart.js で領域いっぱい使うようにリサイズしたい

編集履歴

質問編集履歴

5

内容修正

2018/11/28 15:18

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -58,15 +58,29 @@
58
58
 
59
59
 
60
60
 
61
+ 追記：
62
+
63
+
64
+
65
+ canvas を <div class="chart-container"> でかこんで
66
+
67
+ コンテナにサイズを指定してみましたがあまりかわりません
68
+
69
+
70
+
71
+ そもそも拡大縮小以前に縦をめいっぱい使うことすらできてなくて
72
+
73
+ 'maintainAspectRatio: false' をしても表示されるグラフは常に同じ形なんですが、
74
+
75
+ Chart.js では画面をぴったり使うように正方形や縦長にしたりはできないのでしょうか…
76
+
61
77
 
62
78
 
63
79
  テストコードは以下（グラフは公式のサンプル）
64
80
 
65
81
  ```
66
82
 
67
- <html>
83
+ <style>
68
-
69
- <head><style>
70
84
 
71
85
  body {
72
86
 
@@ -108,7 +122,7 @@
108
122
 
109
123
  }
110
124
 
111
- </style></head>
125
+ </style>
112
126
 
113
127
 
114
128
 
@@ -132,7 +146,11 @@
132
146
 
133
147
  <main id="main">
134
148
 
149
+ <div class="chart-container">
150
+
135
- <canvas id="myChart"></canvas>
151
+ <canvas id="myChart"></canvas>
152
+
153
+ </div>
136
154
 
137
155
  </main>
138
156
 
@@ -158,13 +176,13 @@
158
176
 
159
177
  console.log(cw + " " + ch);
160
178
 
161
- $('canvas').attr('width', cw);
179
+ $('.chart-container').attr('width', cw);
162
-
180
+
163
- $('canvas').attr('height', ch);
181
+ $('.chart-container').attr('height', ch);
164
-
182
+
165
- $('canvas').css('width', cw);
183
+ $('.chart-container').css('width', cw);
166
-
184
+
167
- $('canvas').css('height', ch);
185
+ $('.chart-container').css('height', ch);
168
186
 
169
187
  });
170
188
 
@@ -176,10 +194,6 @@
176
194
 
177
195
  var myChart = new Chart(ctx, {
178
196
 
179
- responsive: true,
180
-
181
- maintainAspectRatio: false,
182
-
183
197
  type: 'bar',
184
198
 
185
199
  data: {
@@ -252,8 +266,10 @@
252
266
 
253
267
  </script>
254
268
 
255
- </body>
269
+
256
270
 
257
271
  </html>
258
272
 
273
+
274
+
259
- ```
275
+ ```

4

質問内容の修正

2018/11/28 15:18

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -64,7 +64,9 @@
64
64
 
65
65
  ```
66
66
 
67
- <style>
67
+ <html>
68
+
69
+ <head><style>
68
70
 
69
71
  body {
70
72
 
@@ -106,7 +108,7 @@
106
108
 
107
109
  }
108
110
 
109
- </style>
111
+ </style></head>
110
112
 
111
113
 
112
114
 
@@ -252,4 +254,6 @@
252
254
 
253
255
  </body>
254
256
 
257
+ </html>
258
+
255
- ```
259
+ ```

3

質問内容の修正

2018/11/28 07:00

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -60,7 +60,7 @@
60
60
 
61
61
 
62
62
 
63
- 最小セットはこんな感じです
63
+ テストコードは以下（グラフは公式のサンプル）
64
64
 
65
65
  ```
66
66
 

2

質問内容の修正

2018/11/28 06:59

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -52,7 +52,9 @@
52
52
 
53
53
 
54
54
 
55
- もっと根本的に flex で領域を指定しても自動で全領域を使うようにはできないんでしょうか
55
+ もっと根本的に flex で領域を指定しても chart.js が自動で全領域を使うようにはできないでしょうか
56
+
57
+ あるいは flex を使わずに可変サイズのヘッダやサイドバーを覗いた領域を確保することはできますか？
56
58
 
57
59
 
58
60
 

1

書式の改善

2018/11/28 06:59

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  なのでリサイズしたときに手動でサイズをセットしたいんですが
8
8
 
9
-
9
+ ```
10
10
 
11
11
  $(window).resize(function() {
12
12
 
@@ -22,21 +22,27 @@
22
22
 
23
23
  });
24
24
 
25
+ ```
26
+
25
27
  とかいても
26
28
 
29
+ ```
30
+
27
31
  $('canvas').attr('width', cw);
28
32
 
29
33
  $('canvas').attr('height', ch);
30
34
 
35
+ ```
36
+
31
37
  とかいても両方かいてもうまくいきません
32
38
 
33
-
39
+ ```
34
40
 
35
41
  responsive: true,
36
42
 
37
43
  maintainAspectRatio: false,
38
44
 
39
-
45
+ ```
40
46
 
41
47
  あたりをセットしてもかわらず
42
48