首页 > 其他分享 >DataGear 5.0.0 新特性之图表追加更新模式

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

时间:2024-04-28 10:44:56浏览次数:30  
标签:5.0 datagear resultData chart 图表 DataGear var

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>
...

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

image

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

源码地址:

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

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

标签:5.0,datagear,resultData,chart,图表,DataGear,var
From: https://www.cnblogs.com/datagear/p/18163253

相关文章

  • echarts 图表+表格实现上图下表
    效果图:1、结构布局<divid="graphQuantityStatistics"></div>2、配置图表data(){    return{      option:{        legend:[          {            left:0,     ......
  • dremio 25.0 KVStore 升级简单说明
    dremio25.0开始对于数据源的存储支持加密了,所以升级上稍有不同,官方给出的操作流程如下参考处理//对于已经运行的,应该先stop,然后进行应用包的替换dremiostop//执行dremio-admin的upgradedremio-adminupgrade//启动dremiostart//停止drem......
  • 【商业智能图表superset】数据源行变为列
    目录1、数据源为posgresql2、数据源为clickhouse场景是数据源按月计算的,但是想按1号,2号,3号,的列来查看,这里要先汇总,按姓名groupby,将行转换为列,数据源不同时,对时间的函数不一样。1、数据源为posgresqlpostgres的抽取时间中月的第几天:extract(dayfromupdate_time)SELECTper......
  • DataGear 5.0.0 新特性之dgMap图表选项
    DataGear企业版1.1.0已发布!http://datagear.tech/pro/DataGear在新发布的5.0.0版本中,重构了地图类图表,新增了dgMap图表选项,可以更方便灵活地设置图表地图。在5.0.0版本之前,由于没有图表地图选项,无法在新建图表时设置地图,只能在将图表加入看板后,通过看板提供的dg-chart-m......
  • 界面控件DevExpress VCL v24.1预览 - 支持RAD Studio 12.1、图表新功能
    DevExpressVCL Controls是Devexpress公司旗下最老牌的用户界面套包,所包含的控件有:数据录入、图表、数据分析、导航、布局等。该控件能帮助您创建优异的用户体验,提供高影响力的业务解决方案,并利用您现有的VCL技能为未来构建下一代应用程序。我们距离下一个主要更新(v24.1)还有几......
  • 使用Docker搭建MongoDB 5.0版本副本集集群
    1、mongodb集群首先我们需要了解mongodb的集群模式,mongodb安装分为单机安装和集群安装。集群安装分为:主从复制(Master-Slaver)集群、副本集(ReplicaSet)集群和分片集群(ShardedCluster)。MongoDB的主从复制(Master-SlaveReplication)已不再是官方推荐的特性,并且在未来的版本中可能会被......
  • 常考图表、工具
    一、分类因果图(石川图/why-why分析/鱼骨图):找出根本原因散点图:表示两个变量之间的:发生次数/频率,展示数字数据的条形。可以展示每个可交付成果缺陷数量、成因排序,不合规次数或产品缺陷的其它表现形式。责任分配矩阵(RAM):用来显示分配给每个工作包的项目资源的表格,反映了工作包或活......
  • 图表汇总详解
    一、核对单核对表属性:数据收集隶属过程组:制定项目管理计划/管理质量/控制质量/识别风险使用情景:一种结构化工具,通常列出特定组成部分,用来核实所要求的一系列步骤是否已得到执行或检查需求列表是否已得到满足,用作提醒二、亲和图定义:用来对大量创意进行分组的技术,头脑风暴后的以便......
  • Jupyter Notebook 中未显示 Plotly 图表
     安装plotlyjupyterlab扩展:https://plotly.com/python/getting-started/#jupyterlab-support-python-35简单的解决方案: 1,插件安装命令行:jupyterlabextensioninstalljupyterlab-plotlyweb端:插件安装jupyterlab-plotly(Enable,然后刷新web)2重启-安装扩展后重启......
  • 离线使用Pyecharts制作可视化图表——方法1:启动本地 js 服务
    在离线使用Pyechart进行可视化数据绘图的时候,会有生成的html网页打不开,或者是网页不出图像,是一个空白页面的问题出现,搜索发现其主要原因是:由于PyEcharts在升级到1.x版本后,将原来HTML网页中使用到的很多js文件换为了在线获取的方式,例如打开我本地生成的bar.html示例文件,就会发......