Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

E2D3 ver. 0.3 gets started

928 views

Published on

E2D3ハッカソン(2015/2/8)で使われたE2D3の説明資料.
作成は山本優さん.

http://e2d3.org
https://www.facebook.com/events/763949880350733/?fref=ts

Published in: Data & Analytics
  • Be the first to comment

  • Be the first to like this

E2D3 ver. 0.3 gets started

  1. 1. E2D3 GETS STARTED Ver 0.3 https://github.com/e2d3/e2d3-v0.3-0208 http://e2d3.org/
  2. 2. 山本 優 ピタリ株式会社 簡単だから活用できる顧客販売管理 「セールスノート」 を提供しています。
  3. 3. 午後からのハッカソンにむけて 時間:45分 環境:Office365 Napa (Visual Studio2013以降でもOK) 内容:E2D3, e2d3.js Ver0.3の概要説明と、先ほどの棒グラ フをE2D3上で実装してみる。
  4. 4. E2D3の概要と構成 Ver0.3 グラフ選択 index.html {JSON} グラフリスト生成 chart.html グラフ用Source (main.js,main.css) の読み込み chart.html#contrib/sampleの場合 1. data.csvの内容をセルに挿入 2. main.js内の • e2d3Show()を実行 • e2d3Update()をデータ変更イベ ントのコールバックに登録 /contrib /sample main.jsmain.css /sample main.jsmain.css data.csv data.csv
  5. 5. App For Officeの概要とE2D3 データ範囲を選択 {Bind Object} ◯データ範囲 ◯値 など データ範囲と内容を【Bindオ ブジェクト】に登録 e2d3.jsは Bindオブジェクト を介してExcelとやり取り 。 e2d3.js main.js この部分はchart.html内のスクリプトで処理しています
  6. 6. NAPAを使用して実際に開発する
  7. 7. main.js内で使う主要なメソッド Ver0.3 e2d3Show()・・・chart.htmlがmain.jsを読み込んだ際に、自動的に実行 するグラフ描画用メソッド。この中に、描画用スクリプトを記述します 。 e2d3Update()・・・再描画ボタンをクリックした際に実行される再描画 用のメソッド。 e2d3.bind2Json()・・・e2d3.jsのAPI。Excelのデータを取得します。 e2d3.addChangeEvent()・・・e2d3.jsのAPI。データ変更イベントを補 足します。
  8. 8. 標準のグローバル変数 Ver0.3 e2d3BindId・・・Excelデータバインド用の変数。Strings baseUrl・・・グラフ固有のディレクトリまでのURL windowSize・・・Windowサイズ。ウィンドウのリサイズ を捕捉します。
  9. 9. bind2Jsonのオプション色々 【dimension】 【2d】行毎に「ヘッダ:値」のセット(array) [ {head-a: value-a-0,head-b: value-b-0・・・}, {head-a: value-a-1,head-b: value-b-1・・・}, ・・・ ] 【3d】2dを1列目の値でラップ(object) { value-a-0:{head-a: value-a-0,head-b: value-b-0・ ・・}, value-a-1:{head-a: value-a-1,head-b: value-b-1・ ・・}, ・・・ ] 【nested】入れ子構造(object) {“header”: [head-a, head-b, head-c,head-d], “labels”: [head-a,head-b], “targets”: [head-c,head-d], “data”: { “key”: “root”,”label”: “root”, “children”: [ { “key”: “head-a”,”label”: “value-a-0”, “children”: [ {“key”: “head-b”,”label”: “value-b-0”, “values”: [“value-c-0”, “value-d- 0”]},… ]… dimensionを指定しない場合は、1行ずつの配列が帰ります。
  10. 10. bind2Jsonのオプション色々 【is_formatted】 【true】 Excelで表示されている状態のデータが返ります 。 ※書式が整形されたデータ。 ※日付に関するデータは、表示通りの値になりま す。 【false】 日付に関するデータは、タイムスタンプで返りま す。 App for Officeの場合、タイムスタンプはmsでは なく、秒です。 1900/01/01から現在の経過秒数になります。 注意として、サンプルデータがセットされる際に、自動的に日付、数字などが 判断され、セルに値がセットされます。 意図ぜず、日付データとして認識される場合があります。今のところ App for Officeの仕様として、アプリ側で挿入時の自動判別を制御できません。
  11. 11. その他のe2d3 API e2d3.dateObjecter(string)・・・ 値を日付オブジェクトとして返します。moment.jsなどの簡 易版として利用できます。日付として認識できなかった場 合は、falseを返します。 ※日付「らしき」データのフォーマットを自動で判別します。必ず日付オ ブジェクトとして扱いたいときや、日付かどうかを判別する際に。 判別の詳細はソースを確認してください。

×