应用DataGear的参数化数据集和看板API性能，能够很不便地制作实时数据可视化看板。

首先，以工夫为参数，新建一个参数化SQL数据集：

SELECT  COL_TIME,  COL_VALUEFROM  T_TIME_SERIES<#if 工夫??>WHERE  COL_TIME > '${工夫}'</#if>ORDER BY  COL_TIME ASC<#if 工夫??>LIMIT 0, 1<#else>LIMIT 0, 5</#if>

参数：

名称      类型       必填工夫      字符串     否

上述数据集在未指定工夫参数时加载最后的5条数据，指定了工夫参数时，则加载一条数据。

而后，新建一个应用上述数据集的折线图图表：

图表类型：平滑折线图数据集列标记：COL_TIME：名称 (name)；COL_VALUE：数值 (value) 更新距离：1000毫秒

而后，新建可视化看板，填写如下看板模板内容：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.dg-chart{  display: inline-block;  width: 60%;  margin-left: 20%;  height: 400px;}</style><script type="text/javascript">//存储时序窗口内要显示的数据var timeSeriesData = [];var chartListener={  onUpdate: function(chart, results)  {    var chartDataSet = chart.chartDataSetMain();    var datas = chart.resultDatasOf(results, chartDataSet);        if(datas.length > 0)    {      if(timeSeriesData.length == 0)         timeSeriesData =  datas;      else      {        timeSeriesData = timeSeriesData.concat(datas);        //限定时序窗口数据量为10        while(timeSeriesData.length > 10)          timeSeriesData.shift();      }            //设置图表下一次刷新时取数的工夫参数      var nextTimeParam = datas[datas.length - 1]["COL_TIME"];      chart.dataSetParamValueFirst(0, nextTimeParam);    }        chart.resultDataOf(results, chartDataSet, timeSeriesData);  }};</script></head><body class="dg-dashboard">  <div style="position: absolute;left:1;top:1;font-size:12px;">    DataGear <br>    http://www.datagear.tech</div><div style="font-size:2em;text-align:center;margin-bottom:5px;">DataGear 看板示例</div><p> </p><div class="dg-chart"  dg-chart-listener="chartListener"  dg-chart-disable-setting="true"  dg-chart-widget="[上述图表ID]"></div></body></html>

点击[保留并展现]按钮，关上看板展现页面，实现！！！

效果图如下所示：

官网地址：http://www.datagear.tech

源码地址：

Gitee：https://gitee.com/datagear/datagear

Github：https://github.com/datageartech/datagear