Download - WCAN winter2015 LT hayashida
![Page 1: WCAN winter2015 LT hayashida](https://reader036.vdocuments.net/reader036/viewer/2022062820/58a881941a28abb47a8b570b/html5/thumbnails/1.jpg)
今わたしが使いたいツールGoogle Chart Tools
トライデントコンピュータ専門学校Webデザイン学科 1年
林田 実樹
![Page 2: WCAN winter2015 LT hayashida](https://reader036.vdocuments.net/reader036/viewer/2022062820/58a881941a28abb47a8b570b/html5/thumbnails/2.jpg)
林田 実樹 - はやしだ みき -
トライデントコンピュータ専門学校 Webデザイン学科
プロフィール
好きなこと → ゲーム、寝る事
アルバイト中
ブログ → http://miki-weblog.com
子猫2匹
飼っています
![Page 3: WCAN winter2015 LT hayashida](https://reader036.vdocuments.net/reader036/viewer/2022062820/58a881941a28abb47a8b570b/html5/thumbnails/3.jpg)
7%8%10%
11%
29%
35%
0
7.5
15
22.5
30
0 4 8 12 16
0
25
50
75
100
4 月 5 月 6 月 7 月
4 月
5 月
6 月
7 月
0 25 50 75 100
0
25
50
75
100
4 月 5 月 6 月 7 月
![Page 4: WCAN winter2015 LT hayashida](https://reader036.vdocuments.net/reader036/viewer/2022062820/58a881941a28abb47a8b570b/html5/thumbnails/4.jpg)
“みなさんはどのようにグラフを作成しますか?”
![Page 5: WCAN winter2015 LT hayashida](https://reader036.vdocuments.net/reader036/viewer/2022062820/58a881941a28abb47a8b570b/html5/thumbnails/5.jpg)
“Excel”
![Page 6: WCAN winter2015 LT hayashida](https://reader036.vdocuments.net/reader036/viewer/2022062820/58a881941a28abb47a8b570b/html5/thumbnails/6.jpg)
画像でしか載せられない
データの変更がめんどう
グラフのサイズを変更できない
Excalの難点
![Page 7: WCAN winter2015 LT hayashida](https://reader036.vdocuments.net/reader036/viewer/2022062820/58a881941a28abb47a8b570b/html5/thumbnails/7.jpg)
“Google Chart Tools”
![Page 8: WCAN winter2015 LT hayashida](https://reader036.vdocuments.net/reader036/viewer/2022062820/58a881941a28abb47a8b570b/html5/thumbnails/8.jpg)
JavaScriptで記述するSVGを使ったグラフツール
Google Chart Tools とは
![Page 9: WCAN winter2015 LT hayashida](https://reader036.vdocuments.net/reader036/viewer/2022062820/58a881941a28abb47a8b570b/html5/thumbnails/9.jpg)
データの書き換えも楽
マウスをのせると詳細が見れる
サイズ・色の変更が可能
表との連動ができる
フィルタリングができる
Google Chart Tools のメリット
![Page 10: WCAN winter2015 LT hayashida](https://reader036.vdocuments.net/reader036/viewer/2022062820/58a881941a28abb47a8b570b/html5/thumbnails/10.jpg)
円グラフ 縦棒グラフ 横棒グラフ
折れ線グラフ 面グラフ
複合グラフ・階段グラフ・散布図 など
7%8%10%11%
29%
35%
0255075100
4 月 5 月 6 月 7 月
4 月5 月6 月7 月
0 25 50 75 100
0255075100
4 月 5 月 6 月 7 月 07.51522.530
0 4 8 12 160255075100
4 月 5 月 6 月 7 月
バブルチャート
Google Chart Tools 一般的なグラフ
![Page 11: WCAN winter2015 LT hayashida](https://reader036.vdocuments.net/reader036/viewer/2022062820/58a881941a28abb47a8b570b/html5/thumbnails/11.jpg)
ローソク足 ゲージメーター
地図チャート ツリーマップ
表(テーブル)など
Google Chart Tools 特殊なグラフ
![Page 12: WCAN winter2015 LT hayashida](https://reader036.vdocuments.net/reader036/viewer/2022062820/58a881941a28abb47a8b570b/html5/thumbnails/12.jpg)
<script src=“ https://www.google.com/jsapi “></script>
google.setOnLoadCallback(drawChart);
↑ GoogleのサイトからAjax APIのロードをする
↑ ロード時のコールバック関数の設定
google.load('visualization', '1', {packages:[‘corechart']});
Google Chart Tools
![Page 13: WCAN winter2015 LT hayashida](https://reader036.vdocuments.net/reader036/viewer/2022062820/58a881941a28abb47a8b570b/html5/thumbnails/13.jpg)
function drawChart(){ // ==================== データ指定 ==================== var data = google.visualization.arrayToDataTable([ ['キャラ名', 'HP', '攻撃力'], ['キャラA', 588, 364], ['キャラB', 523, 238], ['キャラC', 529, 216], ['キャラD', 254, 221] ]);
Google Chart Tools
![Page 14: WCAN winter2015 LT hayashida](https://reader036.vdocuments.net/reader036/viewer/2022062820/58a881941a28abb47a8b570b/html5/thumbnails/14.jpg)
// ============= オプションの指定 ================= var options = { title: 'キャラ(メイン使用)', width: 1200, height: 800, colors: [‘#0F0','#F00'], backgroundColor: '#eee' };
サイズ・色の変更
←グラフの背景←グラフ内のチップの色
Google Chart Tools
![Page 15: WCAN winter2015 LT hayashida](https://reader036.vdocuments.net/reader036/viewer/2022062820/58a881941a28abb47a8b570b/html5/thumbnails/15.jpg)
var chart = new google.visualization.ColumnChart(document.getElementById(‘character’));縦棒グラフ
Google Chart Tools
<div id=“character"></div> HTML上 ・空のdivを用意する ・IDをつける
![Page 16: WCAN winter2015 LT hayashida](https://reader036.vdocuments.net/reader036/viewer/2022062820/58a881941a28abb47a8b570b/html5/thumbnails/16.jpg)
chart.draw(data, options);
Google Chart Tools
![Page 17: WCAN winter2015 LT hayashida](https://reader036.vdocuments.net/reader036/viewer/2022062820/58a881941a28abb47a8b570b/html5/thumbnails/17.jpg)
![Page 19: WCAN winter2015 LT hayashida](https://reader036.vdocuments.net/reader036/viewer/2022062820/58a881941a28abb47a8b570b/html5/thumbnails/19.jpg)
HTML上 ・空のdivを用意する ・IDをつける
var chart = new google.visualization.ColumnChart(document.getElementById(‘character’));縦棒グラフ
Google Chart Tools
<div id="character"></div>
例: LineChart(折れ線グラフ) PieChart(円グラフ) BarChart(横棒グラフ) Gauge(ゲージーメーター) ComboChart(複合グラフ) AreaChart(面グラフ) GeoChart(地図チャート)
![Page 20: WCAN winter2015 LT hayashida](https://reader036.vdocuments.net/reader036/viewer/2022062820/58a881941a28abb47a8b570b/html5/thumbnails/20.jpg)
Googleサイトからjsapiの読み込み
コールバック関数の設定
パッケージの読み込み
配列の宣言とデータの格納
オプションの指定
グラフのオブジェクトの作成
グラフの描画
Google Chart Tools
![Page 21: WCAN winter2015 LT hayashida](https://reader036.vdocuments.net/reader036/viewer/2022062820/58a881941a28abb47a8b570b/html5/thumbnails/21.jpg)
地図上にバブルを配置できる
Google Chart Tools だけの機能
![Page 22: WCAN winter2015 LT hayashida](https://reader036.vdocuments.net/reader036/viewer/2022062820/58a881941a28abb47a8b570b/html5/thumbnails/22.jpg)
ネットが繋がる環境では扱いやすいグラフ
初心者から上級者まで簡単に作れる
Excelにはない機能が実装可能
Google Chart Tools のまとめ
![Page 24: WCAN winter2015 LT hayashida](https://reader036.vdocuments.net/reader036/viewer/2022062820/58a881941a28abb47a8b570b/html5/thumbnails/24.jpg)
ご清聴ありがとうございました!