Recommended
More Related Content
What's hot
What's hot (20)
Similar to amCharts勉強会
Similar to amCharts勉強会 (20)
amCharts勉強会
- 2. 自己紹介 岩見 直樹 株式会社ビズリーチ キャリアトレック事業部 チーフエンジニア ・学生時代はBASIC, アセンブラ、C++ など ・現在の仕事では Java, Spring, Struts2 など ・趣味でいくつかプログラム書いてます（した） - Limy Eclipse Plugin, ER Master改 とか ・エンジニア向けサイトも公開してます http://www.limy.org/program/ https://github.com/naoki-iwami
- 7. amCharts で出来ること （２） グラフのカスタマイズ ・３Dグラフ ・時間（X）軸ズーム機能 ・画像ダウンロード機能 ・簡易アニメーション ・ツールチップ これらは全て、json で1行書くだけで使えます。
- 8. amCharts の使いどころ ・Webサイトで手軽にグラフを使いたい ・でも D3.js はヘビーすぎる そんなとき、amCharts は便利です。
- 10. amCharts グラフ（棒グラフ − 積み上 げ） 本家サイトより抜粋
- 16. amCharts の使い方 (1) グラフの種類を決める serial - 棒グラフ pie - パイチャート xy - XY チャート funnel - Funnelチャート …
- 17. amCharts の使い方 (2) JSの定義 <script type="text/javascript" src="/js/lib/amcharts/amcharts.js"></script> <script type="text/javascript" src="/js/lib/amcharts/serial.js"></script> ・amcharts.js が共通のjs ・あとはグラフの種類に応じて serial.js などを使う amCharts にはCSSはありません（SVG使ってるから）。 （参考）SVG とは？ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="100" cy="100" r="100" fill="red" /> <rect x="130" y="130" width="300" height="200" fill="blue" /> </svg>
- 18. amCharts の使い方 (3) グラフデータを用意 [ { "country": "USA", "visits": 3025 }, { "country": "China", "visits": 1882 }, { "country": "Japan", "visits": 1809 } ] このように、左から順番にグラフデータを用意します。（serialグラフの場合） ← グラフの一番左に表示するデータ ← グラフの左から二番目に表示するデータ ← グラフの一番右に表示するデータ
- 19. amCharts の使い方 (4) データを描画するHTML要素を用意 <div id=”chartdiv”></div> #chartdiv { width : 100%; height : 500px; font-size : 11px; }
- 20. amCharts の使い方 (5) 描画します AmCharts.makeChart("chartdiv", { "type": "serial", "dataProvider": [{ "country": "USA", "visits": 3025 }, { "country": "China", "visits": 1882 }, { "country": "Japan", "visits": 1809 }], "categoryField": "country", "valueAxes": [{ "title": "Visitors from country" }], "graphs": [{ "type": "column", "valueField": "visits", "fillAlphas": 0.9 }] }); ← 描画するHTML要素のID ← グラフの種類 ← グラフデータ ← Y軸の定義 ← グラフの描画方法 ← X軸の定義
- 22. ハンズオン 完成図
- 23. ハンズオン ■ step 1 「数（当月）」のグラフを表示 ■ step 2 「ユニーク数（当月）」のグラフを表示 ■ step 3 Legend（凡例）を表示 ■ step 4 Y軸を一つ追加 ■ step 5 「ユニーク数（前月）」「ユニーク数（前々月）」のグラフを表示
- 24. Cheat Sheet (ルート要素) ■ グラフ種類指定 "type": "serial", ■ 全体フォント指定 "fontFamily": "メイリオ", ■ Legend（凡例）指定 "legend": { "useGraphSettings": true }, ■ アニメーション指定 "startDuration": 0.5, ■ グラフタイトル指定 "titles": [ { "text": "応募数、ユニーク応募者数（全体）", "size": 12 } ],
- 25. Cheat Sheet (ルート要素) ■ グラフデータ指定 "dataProvider": [ { … }, { … } ] ■ X軸のデータフィールド名指定 "categoryField": "dayOfMonth", ■ グラフ描画方法指定 (1) 棒グラフ "graphs": [ { "type": "column", "valueField": "applyCount_2", "valueAxis": "right", "title": "応募数（前々月）", "fillAlphas": 0.1, "fillColor": "#ff0000", "balloonText": "全体 応募数¥n前々月¥n[[value]]件", "lineAlpha": 0.2, "hidden": true, "animationPlayed": true, "lineColor": "#f2699d" }, ]
- 26. Cheat Sheet (ルート要素) ■ グラフ描画方法指定 (2) 折れ線グラフ "graphs": [ { "fillAlphas": 0, "fillColor": "#ff0000", "title": "当月ユニーク応募者数", "valueField": "uniqueApplyCandidateCount_0", "balloonText": "全体 応募者数¥n当月 ユニーク¥n[[value]]人", "animationPlayed": true, "bullet": "round", "bulletBorderColor": "#06ff20", "bulletBorderAlpha": 1, "bulletSize": 12, "lineColor": "#04D215" } ]
- 27. Cheat Sheet (ルート要素) ■ Y軸 "valueAxes": [ { "id": "left", "axisAlpha": 0.5, "dashLength": 5, "position": "left", "title": "ユーザ数（月内積み立て）", "titleFontSize": 16 }, { "id": "right", "integersOnly": true, "reversed": false, "axisAlpha": 0, "dashLength": 5, "position": "right", "title": "数（日別）", "titleFontSize": 16, "autoGridCount": false, "gridCount": 1, "stackType": "3d" } ]
- 28. Cheat Sheet (ルート要素) ■ 3D化 "depth3D": 20, "angle": 20,
- 29. Cheat Sheet (参考サイト) ● amCharts デモ http://www.amcharts.com/demos/ ● amCharts PI Reference http://docs.amcharts.com/3/javascriptcharts/AmChart ● 色指定ツール http://www.colorpicker.com/
- 32. おわり