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