teratail
回答率
85.30%
質問するログイン新規登録
トップに関する質問WEB画面上にグラフを縦に複数並べたい

編集履歴

質問編集履歴

2

画像追加

2019/07/25 07:09

投稿

sato4000
sato4000

スコア42

title CHANGED
File without changes
body CHANGED
@@ -1,76 +1,7 @@
1
1
  ブラウザのサイズに合わせて大きさが変わるグラフ(高さと横幅がある一定以上は小さくならない)を縦に複数並べて表示したいのですが、どのようにすればよいでしょうか。ご教示願います。
2
2
 
3
- 現在下記のコードでグラフ一つだけでしか表示を実現できていません。
3
+ 行数制限があるため一部削除しました。
4
4
 
5
- ```ここに言語を入力
6
- <!DOCTYPE html>
7
- <html style="height: 100%">
8
- <head>
9
- <meta charset="utf-8">
10
- </head>
11
- <body style="height: 100%; margin: 0">
12
- <div id="container" style="height: 100%"></div>
13
- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
14
- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
15
- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
16
- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
17
- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
18
- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
19
- <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
20
- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
21
- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
22
- <script type="text/javascript">
23
- var dom = document.getElementById("container");
24
- var myChart = echarts.init(dom);
25
- var app = {};
26
- option = null;
27
- option = {
28
- xAxis: {
29
- type: 'category',
30
- boundaryGap: false,
31
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
32
- },
33
- yAxis: {
34
- type: 'value'
35
- },
36
- series: [{
37
- data: [820, 932, 901, 934, 1290, 1330, 1320],
38
- type: 'line',
39
- areaStyle: {}
40
- }]
41
- };
42
- ;
43
- if (option && typeof option === "object") {
44
- myChart.setOption(option, true);
45
- }
46
- window.onresize = function () {
47
-
48
- if(window.innerWidth > 500 && window.innerHeight > 250){
49
- myChart.resize({
50
- width: window.innerWidth,
51
- height: window.innerHeight,
52
- silent: false
53
- });
54
- }else if(window.innerWidth > 500 && window.innerHeight <= 250){
55
- myChart.resize({
56
- width: window.innerWidth,
57
- height: 250,
58
- silent: false
59
- });
60
- }else if(window.innerWidth <= 500 && window.innerHeight > 250){
61
- myChart.resize({
62
- width: 500,
63
- height: window.innerHeight,
64
- silent: false
65
- });
66
-
67
- }
68
- };
69
- </script>
70
- </body>
71
- </html>
72
- ```
73
-
74
5
  追記
75
6
  ブラウザのサイズをかなり小さくした場合にグラフの大きさが変になるのですが、何が問題でしょうか。ご教示願います。
76
7
 
@@ -85,6 +16,8 @@
85
16
  <div id="container2" style="height: 50%"></div>
86
17
  <div id="container3" style="height: 50%"></div>
87
18
  <div id="container4" style="height: 50%"></div>
19
+ <div id="container5" style="height: 50%"></div>
20
+ <div id="container6" style="height: 50%"></div>
88
21
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
89
22
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
90
23
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
@@ -188,8 +121,54 @@
188
121
  if (option4 && typeof option4 === "object") {
189
122
  myChart4.setOption(option4, true);
190
123
  }
124
+ var dom5 = document.getElementById("container5");
125
+ var myChart5 = echarts.init(dom5);
126
+ var app5 = {};
127
+ option5 = null;
128
+ option5 = {
129
+ xAxis: {
130
+ type: 'category',
131
+ boundaryGap: false,
132
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
133
+ },
134
+ yAxis: {
135
+ type: 'value'
136
+ },
137
+ series: [{
138
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
139
+ type: 'line',
140
+ areaStyle: {}
141
+ }]
142
+ };
143
+ ;
144
+ if (option5 && typeof option5 === "object") {
145
+ myChart5.setOption(option5, true);
146
+ }
147
+ var dom6 = document.getElementById("container6");
148
+ var myChart6 = echarts.init(dom6);
149
+ var app6 = {};
150
+ option6 = null;
151
+ option6 = {
152
+ xAxis: {
153
+ type: 'category',
154
+ boundaryGap: false,
155
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
156
+ },
157
+ yAxis: {
158
+ type: 'value'
159
+ },
160
+ series: [{
161
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
162
+ type: 'line',
163
+ areaStyle: {}
164
+ }]
165
+ };
166
+ ;
167
+ if (option6 && typeof option6 === "object") {
168
+ myChart6.setOption(option6, true);
169
+ }
191
170
  window.onresize = function () {
192
- if(window.innerWidth > 500 && window.innerHeight > 400){
171
+ if(window.innerWidth > 600 && window.innerHeight > 500){
193
172
  myChart.resize({
194
173
  width: window.innerWidth,
195
174
  height: window.innerHeight / 2,
@@ -210,52 +189,85 @@
210
189
  height: window.innerHeight /2,
211
190
  silent: false
212
191
  });
192
+ myChart5.resize({
193
+ width: window.innerWidth,
194
+ height: window.innerHeight / 2,
195
+ silent: false
196
+ });
197
+ myChart6.resize({
198
+ width: window.innerWidth,
199
+ height: window.innerHeight /2,
200
+ silent: false
201
+ });
213
- }else if(window.innerWidth > 500 && window.innerHeight <= 400){
202
+ }else if(window.innerWidth > 600 && window.innerHeight <= 500){
214
203
  myChart.resize({
215
204
  width: window.innerWidth,
216
- height: 400,
205
+ height: 250,
217
206
  silent: false
218
207
  });
219
208
  myChart2.resize({
220
209
  width: window.innerWidth,
221
- height: 400,
210
+ height: 250,
222
211
  silent: false
223
212
  });
224
213
  myChart3.resize({
225
214
  width: window.innerWidth,
226
- height: 400,
215
+ height: 250,
227
216
  silent: false
228
217
  });
229
218
  myChart4.resize({
230
219
  width: window.innerWidth,
231
- height: 400,
220
+ height: 250,
232
221
  silent: false
233
222
  });
223
+ myChart5.resize({
224
+ width: window.innerWidth,
225
+ height: 250,
226
+ silent: false
227
+ });
228
+ myChart6.resize({
229
+ width: window.innerWidth,
230
+ height: 250,
231
+ silent: false
232
+ });
234
- }else if(window.innerWidth <= 500 && window.innerHeight > 400){
233
+ }else if(window.innerWidth <= 600 && window.innerHeight > 500){
235
234
  myChart.resize({
236
- width: 500,
235
+ width: 600,
237
236
  height: window.innerHeight / 2,
238
237
  silent: false
239
238
  });
240
239
  myChart2.resize({
241
- width: 500,
240
+ width: 600,
242
241
  height: window.innerHeight / 2,
243
242
  silent: false
244
243
  });
245
244
  myChart3.resize({
246
- width: 500,
245
+ width: 600,
247
246
  height: window.innerHeight / 2,
248
247
  silent: false
249
248
  });
250
249
  myChart4.resize({
251
- width: 500,
250
+ width: 600,
252
251
  height: window.innerHeight / 2,
253
252
  silent: false
254
253
  });
255
-
254
+ myChart5.resize({
255
+ width: 600,
256
+ height: window.innerHeight / 2,
257
+ silent: false
258
+ });
259
+ myChart6.resize({
260
+ width: 600,
261
+ height: window.innerHeight / 2,
262
+ silent: false
263
+ });
256
264
  }
257
265
  };
258
266
  </script>
259
267
  </body>
260
268
  </html>
261
- ```
269
+ ```
270
+ ![正常時](0859014f8ea775838e0ec2958365ca17.jpeg)
271
+
272
+ ![異常時](6e68f484993a9fa250b488fd39a94d97.jpeg)
273
+ グラフが重なってしまいます。

1

追記

2019/07/25 07:09

投稿

sato4000
sato4000

スコア42

title CHANGED
File without changes
body CHANGED
@@ -69,4 +69,193 @@
69
69
  </script>
70
70
  </body>
71
71
  </html>
72
+ ```
73
+
74
+ 追記
75
+ ブラウザのサイズをかなり小さくした場合にグラフの大きさが変になるのですが、何が問題でしょうか。ご教示願います。
76
+
77
+ ```ここに言語を入力
78
+ <!DOCTYPE html>
79
+ <html style="height: 100%">
80
+ <head>
81
+ <meta charset="utf-8">
82
+ </head>
83
+ <body style="height: 100%; margin: 0">
84
+ <div id="container" style="height: 50%"></div>
85
+ <div id="container2" style="height: 50%"></div>
86
+ <div id="container3" style="height: 50%"></div>
87
+ <div id="container4" style="height: 50%"></div>
88
+ <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
89
+ <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
90
+ <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
91
+ <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
92
+ <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
93
+ <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
94
+ <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
95
+ <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
96
+ <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
97
+ <script type="text/javascript">
98
+ var dom = document.getElementById("container");
99
+ var myChart = echarts.init(dom);
100
+ var app = {};
101
+ option = null;
102
+ option = {
103
+ xAxis: {
104
+ type: 'category',
105
+ boundaryGap: false,
106
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
107
+ },
108
+ yAxis: {
109
+ type: 'value'
110
+ },
111
+ series: [{
112
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
113
+ type: 'line',
114
+ areaStyle: {}
115
+ }]
116
+ };
117
+ ;
118
+ if (option && typeof option === "object") {
119
+ myChart.setOption(option, true);
120
+ }
121
+ var dom2 = document.getElementById("container2");
122
+ var myChart2 = echarts.init(dom2);
123
+ var app2 = {};
124
+ option2 = null;
125
+ option2 = {
126
+ xAxis: {
127
+ type: 'category',
128
+ boundaryGap: false,
129
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
130
+ },
131
+ yAxis: {
132
+ type: 'value'
133
+ },
134
+ series: [{
135
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
136
+ type: 'line',
137
+ areaStyle: {}
138
+ }]
139
+ };
140
+ ;
141
+ if (option2 && typeof option2 === "object") {
142
+ myChart2.setOption(option2, true);
143
+ }
144
+ var dom3 = document.getElementById("container3");
145
+ var myChart3 = echarts.init(dom3);
146
+ var app3 = {};
147
+ option3 = null;
148
+ option3 = {
149
+ xAxis: {
150
+ type: 'category',
151
+ boundaryGap: false,
152
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
153
+ },
154
+ yAxis: {
155
+ type: 'value'
156
+ },
157
+ series: [{
158
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
159
+ type: 'line',
160
+ areaStyle: {}
161
+ }]
162
+ };
163
+ ;
164
+ if (option3 && typeof option3 === "object") {
165
+ myChart3.setOption(option3, true);
166
+ }
167
+
168
+ var dom4 = document.getElementById("container4");
169
+ var myChart4 = echarts.init(dom4);
170
+ var app4 = {};
171
+ option4 = null;
172
+ option4 = {
173
+ xAxis: {
174
+ type: 'category',
175
+ boundaryGap: false,
176
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
177
+ },
178
+ yAxis: {
179
+ type: 'value'
180
+ },
181
+ series: [{
182
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
183
+ type: 'line',
184
+ areaStyle: {}
185
+ }]
186
+ };
187
+ ;
188
+ if (option4 && typeof option4 === "object") {
189
+ myChart4.setOption(option4, true);
190
+ }
191
+ window.onresize = function () {
192
+ if(window.innerWidth > 500 && window.innerHeight > 400){
193
+ myChart.resize({
194
+ width: window.innerWidth,
195
+ height: window.innerHeight / 2,
196
+ silent: false
197
+ });
198
+ myChart2.resize({
199
+ width: window.innerWidth,
200
+ height: window.innerHeight / 2,
201
+ silent: false
202
+ });
203
+ myChart3.resize({
204
+ width: window.innerWidth,
205
+ height: window.innerHeight / 2,
206
+ silent: false
207
+ });
208
+ myChart4.resize({
209
+ width: window.innerWidth,
210
+ height: window.innerHeight /2,
211
+ silent: false
212
+ });
213
+ }else if(window.innerWidth > 500 && window.innerHeight <= 400){
214
+ myChart.resize({
215
+ width: window.innerWidth,
216
+ height: 400,
217
+ silent: false
218
+ });
219
+ myChart2.resize({
220
+ width: window.innerWidth,
221
+ height: 400,
222
+ silent: false
223
+ });
224
+ myChart3.resize({
225
+ width: window.innerWidth,
226
+ height: 400,
227
+ silent: false
228
+ });
229
+ myChart4.resize({
230
+ width: window.innerWidth,
231
+ height: 400,
232
+ silent: false
233
+ });
234
+ }else if(window.innerWidth <= 500 && window.innerHeight > 400){
235
+ myChart.resize({
236
+ width: 500,
237
+ height: window.innerHeight / 2,
238
+ silent: false
239
+ });
240
+ myChart2.resize({
241
+ width: 500,
242
+ height: window.innerHeight / 2,
243
+ silent: false
244
+ });
245
+ myChart3.resize({
246
+ width: 500,
247
+ height: window.innerHeight / 2,
248
+ silent: false
249
+ });
250
+ myChart4.resize({
251
+ width: 500,
252
+ height: window.innerHeight / 2,
253
+ silent: false
254
+ });
255
+
256
+ }
257
+ };
258
+ </script>
259
+ </body>
260
+ </html>
72
261
  ```