質問編集履歴
4
修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
現在、Nuxt.js+Chart.js でレーダーチャートを作成しているのですが、display: flex; を用いると
|
|
5
|
+
現在、Nuxt.js+Chart.js でレーダーチャートを作成しているのですが、display: flex; を用いるとチャートコンポーネントを横並びにできるのですが、リロードをするとチャートコンポーネントの大きさが、指定した大きさから変わってしまうため、解決したいです。
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
@@ -158,6 +158,24 @@
|
|
|
158
158
|
|
|
159
159
|
</div>
|
|
160
160
|
|
|
161
|
+
<div class="element">
|
|
162
|
+
|
|
163
|
+
<Radar />
|
|
164
|
+
|
|
165
|
+
</div>
|
|
166
|
+
|
|
167
|
+
<div class="element">
|
|
168
|
+
|
|
169
|
+
<Radar />
|
|
170
|
+
|
|
171
|
+
</div>
|
|
172
|
+
|
|
173
|
+
<div class="element">
|
|
174
|
+
|
|
175
|
+
<Radar />
|
|
176
|
+
|
|
177
|
+
</div>
|
|
178
|
+
|
|
161
179
|
</div>
|
|
162
180
|
|
|
163
181
|
</template>
|
3
修正
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Chart.jsを用いて作成したレーダーチャートの大きさをCSSで
|
|
1
|
+
Nuxt.js+Chart.jsを用いて作成したレーダーチャートの大きさを、CSSで変更して横並びにしたい。
|
test
CHANGED
|
@@ -158,24 +158,6 @@
|
|
|
158
158
|
|
|
159
159
|
</div>
|
|
160
160
|
|
|
161
|
-
<div class="element">
|
|
162
|
-
|
|
163
|
-
<Radar />
|
|
164
|
-
|
|
165
|
-
</div>
|
|
166
|
-
|
|
167
|
-
<div class="element">
|
|
168
|
-
|
|
169
|
-
<Radar />
|
|
170
|
-
|
|
171
|
-
</div>
|
|
172
|
-
|
|
173
|
-
<div class="element">
|
|
174
|
-
|
|
175
|
-
<Radar />
|
|
176
|
-
|
|
177
|
-
</div>
|
|
178
|
-
|
|
179
161
|
</div>
|
|
180
162
|
|
|
181
163
|
</template>
|
2
修正
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
レーダーチャート
|
|
1
|
+
Chart.jsを用いて作成したレーダーチャートの大きさをCSSで指定して横並びにしたい。
|
test
CHANGED
|
@@ -2,19 +2,21 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
現在、Nuxt.js+Chart.js でレーダーチャートを作成しているのですが、display: flex; を用いると要素を横並びにできるのですが、リロードするとチャートの大きさが
|
|
5
|
+
現在、Nuxt.js+Chart.js でレーダーチャートを作成しているのですが、display: flex; を用いると要素を横並びにできるのですが、リロードをするとチャートの大きさが指定した大きさから変わってしまうため、解決したいです。
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
6
|
-
|
|
9
|
+
###発生している問題・エラーメッセージ
|
|
7
|
-
|
|
8
|
-
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
9
|
-
|
|
13
|
+
height: 250px; width: 250px;を指定しているのですが、chromeのdeveloperツールを使用すると、以下のように表示されてしまいます。
|
|
14
|
+
|
|
10
|
-
|
|
15
|
+
```
|
|
11
|
-
|
|
12
16
|
|
|
13
17
|
<canvas id="radar-chart" width="320" height="320" style="display: block; height: 400px; width: 400px;" class="chartjs-render-monitor"></canvas>
|
|
14
18
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
19
|
+
```
|
|
18
20
|
|
|
19
21
|
|
|
20
22
|
|
1
追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -6,6 +6,16 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
+
具体的には、height: 250px; width: 250px;を指定しているのですが、なぜか
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
<canvas id="radar-chart" width="320" height="320" style="display: block; height: 400px; width: 400px;" class="chartjs-render-monitor"></canvas>
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
と表示されてしまいます。
|
|
18
|
+
|
|
9
19
|
|
|
10
20
|
|
|
11
21
|
### 該当のソースコード
|