聰明的表格(一套數據源展示表格與圖形,并且支持導出至EXCEl)
SmartTable 是一套數據源使用 Ajax 獲取數據，并展現成表格與圖像的形式，并且支持下載（思路源于talkingdata）的智能表格。
開源引入：Bootstrap 3.0，Bootstrap respond (IE解決方案)，Jquery 11.02，dataTables，echarts，table2CSV
1.功能展示:
-
右上角為切換圖形表格選項
-
圖片顯示中，左下角為切換事件，右下角為切換圖形顯示
-
表格現實中，右下角為下載表格數據
2.示例&參數
<div class="smart_here" src="./demodata.txt" ></div> <div class="smart_here" src="./demodata2.txt" ></div>
元素的class設置為smart_here,SmartTable會自動檢測此組件并進行圖表寫入
Demo
[{
"data":[['2014-07-20','0','12','644','0'],['2014-07-21','35','3','444','60'],['2014-07-22','9','10','144','0'],['2014-07-23','1','5','144','50'],['2014-07-24','2','656','155','1'],['2014-07-25','0','8','144','5'],['2014-07-26','7','1','220','0']],
"column":[{ "title": "時間"},{ "title": "iPad"},{ "title": "iPhone"},{ "title": "iPod touch"},{ "title": "PC"}],
"title":"我是測試數據",
"pdim":"total_time",
"front":"graph",
"graph":{
"ptype":"line",
"markPoint":{
"data" : [{"type" : 'max', "name": "最大值"}]
},"markLine":{
"data" : [{"type" : "max", "name": "自定義名字"}]
},
"zoom":{
"start":80,
"end":100
}
},
"table":{
"scrolly":400,
"page":200,
"scrollx":true
}
}] -
參1:data 數據源(時間維度)
-
參2:column 表頭(事件)
-
參3:title SmartTable名稱
-
參3:pdim 默認維度
-
time 時間緯度 ： 時間為橫軸，每一條線為一個事件
-
event 事件緯度 ： 事件為橫軸，每一條線為一個時間
-
total_time 統計(時間)緯度 ： 時間為橫軸，展示各事件數值的一個加和與平均
-
total_event 統計(事件)緯度 ： 事件為橫軸，展示各時間數值的一個加和與平均
-
參4:front 默認顯示在前面
-
all 全部顯示
-
table 表格
-
graph 圖形
-
輔參1:graph 圖形的輔助參數
-
line 線圖
-
bar 柱狀圖
-
area 區域圖
-
ptype 圖片類型(單圖片支持多類型展示，采用;分割，且支持兩個坐標系，追加:1，例如 “line;bar:1”)
-
markPoint 圖形中的點標注
-
markLine 圖形中的線標注
-
zoom 數據拖拽條 -start 開始百分比 -end 結束報粉筆
-
輔參2:table 表格的輔助參數
-
scrolly y軸長度
-
page 分頁數
-
scrollx 橫軸拖拽條
注意：測試代碼時請放入IIS或Apache下，然后使用URL路徑訪問，不要直接打開index.html
4.SmartTable匯集
從v3.2版本，我們引入了一個新的功能元素，SmartTable匯集，它支持將相同事件的多個SmartTable的統計緯度中加和數據進行匯總展示
4-1.示例&參數
<div class="smart_comb_here" title="統計維度匯總" src="./demodata.txt;./demodata2.txt;./demodata.txt;./demodata.txt" ptitle="匯總1;匯總2;匯總1;匯總1"></div>
元素的class設置為smart_comb_here,SmartTable會自動檢測此組件并進行表寫入
-
參1:src 數據源地址：多個SmartTable數據源以;隔開
-
參2:ptitle 各列的名稱：與數據源位置一一對應
-
參2:title 表格的名稱