E2D3 ver. 0.3 gets started
Download as PPTX, PDF0 likes1,383 views
E2D3ハッカソン（2015/2/8）で使われたE2D3の説明資料． 作成は山本優さん． http://e2d3.org https://www.facebook.com/events/763949880350733/?fref=ts
![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を指定しない場合は、１行ずつの配列が帰ります。](https://image.slidesharecdn.com/e2d3ver-150219231049-conversion-gate01/85/E2D3-ver-0-3-gets-started-9-320.jpg)
E2D3 ver. 0.3 gets started
- 1. E2D3 GETS STARTED Ver 0.3 https://github.com/e2d3/e2d3-v0.3-0208 http://e2d3.org/
- 3. 午後からのハッカソンにむけて 時間：45分 環境：Office365 Napa (Visual Studio2013以降でもOK) 内容：E2D3, e2d3.js Ver0.3の概要説明と、先ほどの棒グラ フをE2D3上で実装してみる。
- 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. App For Officeの概要とE2D3 データ範囲を選択 {Bind Object} ◯データ範囲 ◯値 など データ範囲と内容を【Bindオ ブジェクト】に登録 e2d3.jsは Bindオブジェクト を介してExcelとやり取り 。 e2d3.js main.js この部分はchart.html内のスクリプトで処理しています
- 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を指定しない場合は、１行ずつの配列が帰ります。
- 10. bind2Jsonのオプション色々 【is_formatted】 【true】 Excelで表示されている状態のデータが返ります 。 ※書式が整形されたデータ。 ※日付に関するデータは、表示通りの値になりま す。 【false】 日付に関するデータは、タイムスタンプで返りま す。 App for Officeの場合、タイムスタンプはmsでは なく、秒です。 1900/01/01から現在の経過秒数になります。 注意として、サンプルデータがセットされる際に、自動的に日付、数字などが 判断され、セルに値がセットされます。 意図ぜず、日付データとして認識される場合があります。今のところ App for Officeの仕様として、アプリ側で挿入時の自動判別を制御できません。