DataGear中怎么实现一个数据可视化表格图表

DataGear中怎么实现一个数据可视化表格图表，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

• 自定义列属性（标题、列宽、是否可排序等）

<script type="text/javascript"> var tableOptions= {   columns:   [     {       //标题       title: "自定义标题",              //列宽："100px"、"20%"       width: "100px",              //是否可排序       orderable: false,              //是否可见       visible: false     },     ...   ] }; </script> ... <div dg-chart-options="tableOptions" dg-chart-widget="..."></div> ...

• 排序

<script type="text/javascript"> var tableOptions= {   //开启排序   ordering: true,      //第一列升序、第二列降序   order: [[ 0, 'asc' ], [ 1, 'desc' ]] }; </script> ... <div dg-chart-options="tableOptions" dg-chart-widget="..."></div> ...

• 客户端分页

<script type="text/javascript"> var tableOptions= {   //开启分页   paging: true,      //可选，自定义页大小下拉框   lengthMenu: [ 10, 25, 50, 75, 100 ],      //可选，默认页大小   pageLength: 50 }; </script> ... <div dg-chart-options="tableOptions" dg-chart-widget="..."></div> ...

• 固定列

<script type="text/javascript"> var tableOptions= {   fixedColumns:   {     //左边固定列数     leftColumns: 1,     //右边固定列数     rightColumns: 1   } }; </script> ... <div dg-chart-options="tableOptions" dg-chart-widget="..."></div> ...

• 添加序号列

<script type="text/javascript"> var tableOptions= {   //添加一个序号列   processRenderOptions: function(options)   {     var columns = options.columns;          columns.unshift(     {       title: "序号",       orderable: false,       data: "",       render: function(value, type, row, meta)       {         return "";       }     });   },      //设置序号列值   rowCallback: function(row, data, displayNum, displayIndex, dataIndex)   {     $("td:first", row).html(displayIndex);   } }; </script> ... <div dg-chart-options="tableOptions" dg-chart-widget="..."></div> ...

• 轮播

... <div dg-chart-options="{carousel: true}" dg-chart-widget="..."></div> ...

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。