通过DataGear的表格图表轮播设置项（1.13.0版本新增），可以轻松制作按行滚动的轮播表格数据可视化看板。
首先，新建表格所需的数据集，以如下CSV数据集为例：
1name, value 2DataGear, 160 3Line, 140 4Bar, 120 5Pie, 110 6Gauge, 100 7Scatter, 120 8...
使用上述数据集新建一个表格图表：
1图表类型：基本表格 2数据集列标记：无需标记
然后，新建可视化看板，填写如下看板模板内容：
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title></title> 6<style type="text/css"> 7.dg-dashboard{ 8 position: absolute; 9 left: 0px; 10 right: 0px; 11 top: 0px; 12 bottom: 0px; 13} 14.dg-chart{ 15 display: inline-block; 16 margin-left: 10%; 17 margin-right: 10%; 18 width: 80%; 19 height: 400px; 20} 21</style> 22<script type="text/javascript"> 23var prevTr = null; 24var tableOptions = 25{ 26 carousel: function(tr, visibleHeight, height) 27 { 28 //切换行时停顿 29 var interval = (prevTr == null || prevTr==tr ? 25 : 1000); 30 prevTr = tr; 31 32 return interval; 33 } 34}; 35</script> 36</head> 37<body class="dg-dashboard" dg-chart-theme="{borderWidth:'1px',borderColor:'#ccc'}"> 38<div style="position: absolute;left:1;top:1;font-size:12px;"> 39 DataGear <br> 40 http://www.datagear.tech 41</div> 42<div style="font-size:2em;text-align:center;margin-bottom:5px;">DataGear 看板示例</div> 43<p> </p> 44<div class="dg-chart" 45 dg-chart-options="tableOptions" 46 dg-chart-widget="27e7e35da171caf90b62"> 47<!--表格-基本表格--></div> 48</body> 49</html>
点击[保存并展示]按钮，打开看板展示页面，完成！！！
效果图如下所示：
源码地址：
Gitee：https://gitee.com/datagear/datagear