質問編集履歴

5

書式の改善

2018/01/23 00:02

投稿

t-watanabe
t-watanabe

スコア7

test CHANGED
File without changes
test CHANGED
@@ -36,6 +36,132 @@
36
36
 
37
37
  縦棒グラフのコード
38
38
 
39
+ ```
40
+
41
+ <!DOCTYPE html>
42
+
43
+ <html>
44
+
45
+ <head>
46
+
47
+ <meta charset="UTF-8">
48
+
49
+ <title>HTML5サンプル</title>
50
+
51
+ <!-- グラフ描画 -->
52
+
53
+ <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
54
+
55
+ <script type="text/javascript">
56
+
57
+ google.charts.load('current', {packages: ['corechart', 'bar']});
58
+
59
+ google.charts.setOnLoadCallback(drawBasic);
60
+
61
+ google.charts.setOnLoadCallback(drawBasic2);
62
+
63
+
64
+
65
+ function drawBasic() {
66
+
67
+ var data = google.visualization.arrayToDataTable([
68
+
69
+ ['param','A', 'B', 'C'],
70
+
71
+ ['Age01', 50, 10, 35],
72
+
73
+ ['Age02', 40, 20, 10],
74
+
75
+ ['Age03', 60, 25, 10],
76
+
77
+ ]);
78
+
79
+
80
+
81
+ var options = {
82
+
83
+ isStacked: true,
84
+
85
+ title: 'sample',
86
+
87
+ chartArea: {width: '50%'},
88
+
89
+ width: 300,
90
+
91
+ height: 450,
92
+
93
+ colors: ['#33FFFF','#ffc0cb','#ff1493'],
94
+
95
+ hAxis: {
96
+
97
+ minValue: 0,
98
+
99
+ maxValue: 100, //最大値の指定
100
+
101
+ },
102
+
103
+ //凡例の非表示
104
+
105
+ legend: { position: "none" },
106
+
107
+ animation: { //グラフのアニメーション表示
108
+
109
+ duration: 1000,
110
+
111
+ easing: 'out', //out:早く→ 遅く
112
+
113
+ startup: true
114
+
115
+ },
116
+
117
+ series: {
118
+
119
+ 1: {
120
+
121
+ targetAxisIndex: 1
122
+
123
+ },
124
+
125
+ 2: {
126
+
127
+ targetAxisIndex: 1
128
+
129
+ },
130
+
131
+ },
132
+
133
+ };
134
+
135
+
136
+
137
+ var chart = new google.charts.Bar(document.getElementById('chart_div'));
138
+
139
+
140
+
141
+ chart.draw(data, google.charts.Bar.convertOptions(options));
142
+
143
+ }
144
+
145
+
146
+
147
+ </script>
148
+
149
+ </head>
150
+
151
+ <body>
152
+
153
+
154
+
155
+ <div id="chart_div"></div>
156
+
157
+
158
+
159
+ </body>
160
+
161
+ </html>
162
+
163
+ ```
164
+
39
165
 
40
166
 
41
167
  横棒グラフにしたコード

4

書式の改善

2018/01/23 00:02

投稿

t-watanabe
t-watanabe

スコア7

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  こちら(↓)の様なグループ化された積み上げ棒グラフを、横棒グラフで実現したいのですが、どうしても実現出来ずにいます。
4
4
 
5
- [リンク内容](http://jsfiddle.net/crclayton/v1u1afzn/4/)
5
+ [http://jsfiddle.net/crclayton/v1u1afzn/4/](http://jsfiddle.net/crclayton/v1u1afzn/4/)
6
6
 
7
7
 
8
8
 

3

書式の改善

2018/01/22 10:43

投稿

t-watanabe
t-watanabe

スコア7

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  こちら(↓)の様なグループ化された積み上げ棒グラフを、横棒グラフで実現したいのですが、どうしても実現出来ずにいます。
4
4
 
5
- http://jsfiddle.net/crclayton/v1u1afzn/4/
5
+ [リンク内容](http://jsfiddle.net/crclayton/v1u1afzn/4/)
6
6
 
7
7
 
8
8
 

2

書式の改善

2018/01/22 10:43

投稿

t-watanabe
t-watanabe

スコア7

test CHANGED
File without changes
test CHANGED
@@ -12,13 +12,21 @@
12
12
 
13
13
  縦棒グラフ
14
14
 
15
+ ```
16
+
15
17
   var chart = new google.charts.Bar
18
+
19
+ ```
16
20
 
17
21
  だと実現出来るのですが、
18
22
 
19
23
  横棒グラフ
20
24
 
25
+ ```
26
+
21
27
   var chart = new google.visualization.BarChart
28
+
29
+ ```
22
30
 
23
31
  にすると、各値が全て積み上げられてしまいます。
24
32
 

1

書式の改善

2018/01/22 10:42

投稿

t-watanabe
t-watanabe

スコア7

test CHANGED
File without changes
test CHANGED
@@ -31,6 +31,8 @@
31
31
 
32
32
 
33
33
  横棒グラフにしたコード
34
+
35
+ ```
34
36
 
35
37
  <!DOCTYPE html>
36
38
 
@@ -154,6 +156,6 @@
154
156
 
155
157
  </html>
156
158
 
157
-
159
+ ```
158
160
 
159
161
  ドキュメントを読み切れていないのかも知れませんが、何卒ご助力のほどお願い致します。