聪明的表格 SmartTable

GPL
JavaScript
跨平台
2015-01-08
toryzen

SmartTable 是一套数据源使用 Ajax 获取数据,并展现成表格与图像的形式,并且支持下载(思路源于talkingdata)的智能表格。

开源引入:Bootstrap 3.0,Bootstrap respond (IE解决方案),Jquery 11.02,dataTables,echarts,table2CSV

1.功能展示:

image

  • 右上角为切换图形表格选项

  • 图片显示中,左下角为切换事件,右下角为切换图形显示

  • 表格现实中,右下角为下载表格数据

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 图形的辅助参数

  • 辅参2:table 表格的辅助参数

    • scrolly y轴长度

    • page 分页数

    • scrollx 横轴拖拽条

注意:测试代码时请放入IIS或Apache下,然后使用URL路径访问,不要直接打开index.html

4.SmartTable汇集

从v3.2版本,我们引入了一个新的功能元素,SmartTable汇集,它支持将相同事件的多个SmartTable的统计纬度中加和数据进行汇总展示
image

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 表格的名称

加载中

评论(0)

暂无评论

暂无资讯

暂无问答

requirejs的使用

requirejs的使用

2016/09/08 09:01
58
0
smarttable的使用(基于angularjs)

smarttable的使用

2016/09/08 08:53
867
0

没有更多内容

加载失败,请刷新页面

没有更多内容

返回顶部
顶部