質問編集履歴

2

コードの追加

2020/09/08 05:41

投稿

rinkoro
rinkoro

スコア23

test CHANGED
File without changes
test CHANGED
@@ -42,19 +42,21 @@
42
42
 
43
43
  <div class="swiper-slide">
44
44
 
45
- HTML記入
45
+ <div class="graph">
46
+
47
+ <div i="chart-div"></div>
46
48
 
47
49
  </div>
48
50
 
49
51
  <div class="swiper-slide">
50
52
 
51
-    HTML記入
53
+    <h3>title</h3>
52
54
 
53
55
  </div>
54
56
 
55
57
  <div class="swiper-slide">
56
58
 
57
-    HTML記入
59
+    <h3>title2</h3>
58
60
 
59
61
  </div>
60
62
 
@@ -62,4 +64,148 @@
62
64
 
63
65
  </div>
64
66
 
67
+ <script>
68
+
69
+ //----------画面全体スライドショー----------//
70
+
71
+
72
+
73
+ // ライブラリのロード
74
+
75
+ // name:visualization(可視化),version:バージョン(1),packages:パッケージ(corechart)
76
+
77
+ google.load('visualization', '1', {'packages':['corechart']});
78
+
79
+
80
+
81
+ // グラフを描画する為のコールバック関数を指定
82
+
83
+ google.setOnLoadCallback(drawChart);
84
+
85
+
86
+
87
+ // グラフの描画
88
+
89
+ function drawChart() {
90
+
91
+
92
+
93
+ // 配列からデータの生成
94
+
95
+ var data = google.visualization.arrayToDataTable([
96
+
97
+
98
+
99
+ ['年度', '目標', '実績'],
100
+
101
+ ['4月', 5000, 1000 ],
102
+
103
+ ['5月', 6000, 2000 ],
104
+
105
+ ['6月', 7000, 1500 ],
106
+
107
+ ['7月', 8000, 3000 ],
108
+
109
+ ['8月', 9000, 4500 ],
110
+
111
+ ['9月', 10000, 8000 ]
112
+
113
+ ]);
114
+
115
+
116
+
117
+ // オプションの設定
118
+
119
+ var options = {
120
+
121
+ title: '推移',
122
+
123
+ colors:['DDA0DD','87CEFA'],
124
+
125
+ backgroundColor: '757575',
126
+
127
+ chartArea: {
128
+
129
+ backgroundColor: '757575'
130
+
131
+ },
132
+
133
+ titleTextStyle: { color: '#FFF' },
134
+
135
+ hAxis: {
136
+
137
+ textStyle: {color:'#FFF'},
138
+
139
+ },
140
+
141
+ vAxis: {
142
+
143
+ textStyle:{color:'#FFF'},
144
+
145
+ },
146
+
147
+ subtitle: {
148
+
149
+ textStyle:{color:'#FFF'},
150
+
151
+ },
152
+
153
+ legend: {
154
+
155
+ textStyle: {color: '#FFF'},
156
+
157
+ }
158
+
159
+ };
160
+
161
+
162
+
163
+
164
+
165
+ // 指定されたIDの要素に棒グラフを作成
166
+
167
+ var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
168
+
169
+
170
+
171
+ // グラフの描画
172
+
173
+ chart.draw(data, options);
174
+
175
+ }
176
+
177
+
178
+
179
+ var mySwiper = new Swiper('.swiper-container', {
180
+
181
+ loop: true,
182
+
183
+ speed: 2000,
184
+
185
+ autoplay: {
186
+
187
+ delay:10000,
188
+
189
+ stopOnLast:false,
190
+
191
+ desableOnInteraction:true
192
+
193
+ },
194
+
195
+ effect: 'slide'
196
+
197
+ });
198
+
199
+
200
+
201
+
202
+
203
+
204
+
205
+ </script>
206
+
207
+
208
+
209
+
210
+
65
211
  ```

1

説明の補足

2020/09/08 05:41

投稿

rinkoro
rinkoro

スコア23

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  以下のように生のHTMLを表示かつ、スライドさせたいとおもっており、
6
6
 
7
- 一応スライドさせることはできたのですが、
7
+ 一応スライドさせることはできたのですが、(laravelのblade内にかいています)
8
8
 
9
9
 
10
10