DataGear 5.0.0 新特性之图表追加更新模式

DataGear 企业版 1.1.0 已发布，欢迎体验！ http://datagear.tech/pro/

DataGear在新发布的 5.0.0 版本中，新增了图表追加更新模式支持，包括dgUpdateAppendMode图表选项，以及chart.updateAppendMode()函数，可以非常方便地制作具有追加更新效果的图表，比如实时曲线图、柱状图等。

在 5.0.0 版本之前，要实现追加更新效果的图表，需要在看板里自己通过dg-chart-listener编程实现，比如：

<script type="text/javascript">
//存储追加处理后的数据
var resultData = [];
var chartListener={
  onUpdate: function(chart, results){
    var chartDataSet = chart.chartDataSetMain();
    var datas = chart.resultDatasOf(results, chartDataSet);
    if(datas.length > 0) {
      if(resultData.length == 0)
         resultData =  datas;
      else{
        //追加数据
        resultData = resultData.concat(datas);
        while(resultData.length > 10)
          resultData.shift();
      }
    }
    chart.resultDataOf(results, chartDataSet, resultData);
  }
};
</script>
...
<div dg-chart-listener="chartListener" dg-chart-widget="..."></div>
...

在 5.0.0 版本中，仅需要设置dgUpdateAppendMode图表选项即可实现。

比如，可以在新建图表时通过编辑图表选项的方式：

{
  dgUpdateAppendMode: true
}

也可以在看板里通过编辑图表选项的方式：

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

或者，通过dg-chart-listener的方式：

<script type="text/javascript">
var myChartListener =
{
    onRender: function(chart)
    {
        chart.updateAppendMode(true);
    }
};
</script>
...
<div dg-chart-widget="..." dg-chart-listener="myChartListener"></div>
...

下面是一个图表追加更新模式的示例效果图：

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

源码地址：

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

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