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