teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問表示グラフが親要素からはみ出てしまう

編集履歴

質問編集履歴

11

修正

2019/10/31 09:53

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -41,8 +41,6 @@
41
41
  </div>
42
42
 
43
43
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
44
-
45
- <script type="text/javascript"
46
44
 
47
45
  <script type="text/javascript" src="index.js"></script>
48
46
 
@@ -138,8 +136,6 @@
138
136
 
139
137
  position: relative;
140
138
 
141
- margin: auto;
142
-
143
139
  height: 80vh;
144
140
 
145
141
  width: 80vw;

10

変更

2019/10/31 09:53

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -3,10 +3,6 @@
3
3
  親要素に合わせてサイズ変更するようにしたのですが、親要素からはみ出てしまいました。
4
4
 
5
5
  どうすれば収まるのでしょうか？
6
-
7
-
8
-
9
- ![イメージ説明](62767a51fa33cad44236ddda8b0f983d.jpeg)
10
6
 
11
7
 
12
8
 

9

syuusei

2019/10/31 09:48

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -3,10 +3,6 @@
3
3
  親要素に合わせてサイズ変更するようにしたのですが、親要素からはみ出てしまいました。
4
4
 
5
5
  どうすれば収まるのでしょうか？
6
-
7
-
8
-
9
- [◆デモ◆](https://codepen.io/kinton1234/pen/OJJxBLz)
10
6
 
11
7
 
12
8
 

8

修正

2019/10/31 09:46

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -10,9 +10,7 @@
10
10
 
11
11
 
12
12
 
13
- ![イメージ説明](05b966cfb2384d366349c264ae1931d1.jpeg)
13
+ ![イメージ説明](62767a51fa33cad44236ddda8b0f983d.jpeg)
14
-
15
-
16
14
 
17
15
 
18
16
 

7

修正

2019/10/30 22:02

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- 表示グラフをウィンドウサイズ併せてサイズ変更させたい。
1
+ 表示グラフが親要素からはみ出てしまう
test CHANGED
File without changes

6

修正

2019/10/30 21:57

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,18 @@
1
- Chart.jsでグラフを描画しましたが、ウィンドウサイズを縮めても、中のグラフサイズが変わりません。※大きくするときはグラフは大きくなります
1
+ Chart.jsでグラフを描画しましたが、左半分の親要素内に収まりません。
2
2
 
3
- サイズ変更イベントで直接サイズを設定しましたが、いびつな形になってしまいます。
3
+ 親要素に合わせてサイズ変更するようにしたのですが、親要素からはみ出てしまいました。
4
4
 
5
+ どうすれば収まるのでしょうか？
6
+
7
+
8
+
9
+ [◆デモ◆](https://codepen.io/kinton1234/pen/OJJxBLz)
10
+
11
+
12
+
5
- ウィンドウサイズの変更に連動してグラフのサイズを変えるにはどうすればいいのでしょうか？
13
+ ![イメージ説明](05b966cfb2384d366349c264ae1931d1.jpeg)
14
+
15
+
6
16
 
7
17
 
8
18
 

5

修正

2019/10/30 21:56

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -30,7 +30,11 @@
30
30
 
31
31
  <div id="left">
32
32
 
33
+ <div class="chart-container">
34
+
33
- <canvas id="my-chart"></canvas>
35
+ <canvas id="my-chart"></canvas>
36
+
37
+ </div>
34
38
 
35
39
  </div>
36
40
 
@@ -72,8 +76,6 @@
72
76
 
73
77
  options: {
74
78
 
75
- responsive: true,
76
-
77
79
  maintainAspectRatio: false,
78
80
 
79
81
  }
@@ -112,6 +114,8 @@
112
114
 
113
115
  background: pink;
114
116
 
117
+ width: 50vw;
118
+
115
119
  }
116
120
 
117
121
 
@@ -124,6 +128,22 @@
124
128
 
125
129
  padding: 20px;
126
130
 
131
+ width: 50vw;
132
+
133
+ }
134
+
135
+
136
+
137
+ .chart-container {
138
+
139
+ position: relative;
140
+
141
+ margin: auto;
142
+
143
+ height: 80vh;
144
+
145
+ width: 80vw;
146
+
127
147
  }
128
148
 
129
149
  ```

4

修正

2019/10/30 21:50

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -3,8 +3,6 @@
3
3
  サイズ変更イベントで直接サイズを設定しましたが、いびつな形になってしまいます。
4
4
 
5
5
  ウィンドウサイズの変更に連動してグラフのサイズを変えるにはどうすればいいのでしょうか？
6
-
7
- [●「動作デモ](https://codepen.io/kinton1234/pen/OJJxBLz)
8
6
 
9
7
 
10
8
 
@@ -86,36 +84,6 @@
86
84
 
87
85
 
88
86
 
89
- // let timer = 0;
90
-
91
- // window.onresize = function () {
92
-
93
- // if (timer > 0) {
94
-
95
- // clearTimeout(timer);
96
-
97
- // }
98
-
99
- // timer = setTimeout(function () {
100
-
101
- // // グラフサイズ変更
102
-
103
- // let w = document.getElementById("left").clientWidth;
104
-
105
- // let h = document.getElementById("left").clientHeight;
106
-
107
- // if (w < h) h = w;
108
-
109
- // else w = h;
110
-
111
- // document.getElementById('my-chart').style.width = String(w) + "px";
112
-
113
- // document.getElementById('my-chart').style.height = String(h) + "px";
114
-
115
- // }, 200);
116
-
117
- // };
118
-
119
87
  ```
120
88
 
121
89
 

3

修正

2019/10/30 21:43

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  ウィンドウサイズの変更に連動してグラフのサイズを変えるにはどうすればいいのでしょうか？
6
6
 
7
- [動作デモ](https://codepen.io/kinton1234/pen/OJJxBLz)
7
+ [●「動作デモ](https://codepen.io/kinton1234/pen/OJJxBLz)
8
8
 
9
9
 
10
10
 

2

修正

2019/10/30 14:27

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -54,33 +54,15 @@
54
54
 
55
55
  ```javascript
56
56
 
57
- let parOK = 30;
58
-
59
- let parNG = 25;
60
-
61
- let parMiss = 10;
62
-
63
-
64
-
65
57
  window.onload = function() {
66
58
 
67
59
  let data = {
68
60
 
69
61
  datasets: [{
70
62
 
71
- data: [parOK, parNG, parMiss],
63
+ data: [10, 10, 10]}],
72
64
 
73
- backgroundColor: [
74
-
75
- "rgb(54, 162, 235)",
76
-
77
- "rgb(255, 99, 132)",
78
-
79
- "rgb(255, 205, 86)"
80
-
81
- ]}],
82
-
83
- labels: [ 'OK', 'NG', 'Miss' ],
65
+ labels: [ 'うさぎ', 'いぬ', 'たぬき' ],
84
66
 
85
67
  };
86
68
 
@@ -92,41 +74,13 @@
92
74
 
93
75
  options: {
94
76
 
95
- responsive: true,
77
+ responsive: true,
96
78
 
97
- maintainAspectRatio: false,
79
+ maintainAspectRatio: false,
98
-
99
- plugins: {
100
-
101
- labels: [{
102
-
103
- render: 'percentage',
104
-
105
- showActualPercentages: true,
106
-
107
- fontColor: '#fff',
108
-
109
- textShadow: true,
110
-
111
- shadowBlur: 3,
112
-
113
- shadowOffsetX: -1,
114
-
115
- shadowOffsetY: 1,
116
-
117
- fontSize: 28,
118
-
119
- }
120
-
121
- ]
122
-
123
- },
124
80
 
125
81
  }
126
82
 
127
83
  });
128
-
129
-
130
84
 
131
85
  }
132
86
 

1

修正

2019/10/30 14:26

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
File without changes