OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

OnceVI前后端分离的数据可视化报表工具简介


分享到
分类 技术前沿   关键字 分享   发布 ourjs  1488794183583
注意 转载须保留原文链接,译文链接,作者译者等信息。  

OnceVI简介

企业管理软件在报表的应用上有大量需求,也存在大量困扰。OnceVI是一款使用Web和H5技术打造的前后端分离的报表开发工具。OnceVI支持直接在SVG矢量图上绑定数据,并通过JSON数据格式将后台数据呈现到前端报表界面。开发者可使用任何编程语言来编写JSON数据服务,OnceVI使用内存数据库来缓存数据,使用者不再需要考虑高并发下的性能问题。

界面设计

与其它报表软件不同,您无需从零开始设计界面。OnceVI基于SVG矢量图。SVG可缩放矢量图形是用于描述二维矢量图形的一种图形格式,它是一个开放标准,目前互联网上有海量的设计素材。您不仅仅可以在OnceVI上设计报表界面。您也可以在Adobe illustrator中甚至是AutoCAD上设计界面。在制作一些监控类时时报表,如智慧工厂和立体仓储的状态监控时,您可以直接将生产线、建设的CAD设计图转为SVG, 作为报表界面,这能极大地降低您的工作量。

在Adobe illustrator中您可以直接将源文件另存为svg格式。

您也可以在OnceVI上设计SVG报表,或者上传设计好的SVG进行数据绑定。

前后端分离

OnceVI采用前后端分离的设计模式,前后端通过JSON 来进行数据交换。报表的展示不需要依赖后端实现。您也可以将开发好的报表集成进自己的Web服务器中。您可以通过OnceDoc私有云版的Sql Builder来创建数据服务接口。也可以自己构建基于JSON的Web Service。

您可以使用任何编程语言来构建数据服务,此时需要使用JSONP数据格式或OnceDoc Proxy代理工具来解决跨域问题。

 

数据缓存

OnceDoc Proxy在解决跨域的同时,也提供了一种数据缓存机制。基于OnceDB内存数据库实现,OnceDB是我们基于开源键值数据库Redis开发的。Redis体积小巧,性能优异,实施简单。特别适合在高并发的场景。我们在他的基础上添加了一些新的数据查询指令,以方便做数据过滤、处理和筛选。

在数据量特别大或者查询条件比较复杂的情况下,通常需要花比较长的时间。OnceDoc Proxy会将后台数据处理结果,缓存到内存数据库中。这样在同一时间将只会有一条数据请求发到您的数据服务接口。您有充分的硬件资源和时间去处理海量数据的筛选、处理与分析,而不需要担心并发量。

数据预处理

OnceVI支持在前端对数据进行预处理。通过数据预处理,您可以将数据转换成矢量图形的颜色、大小、长度、高度等展示,并且不需要改变后台数据接口。

点开Filter您就可以添加JavaScript过滤函数。下面的例子,演示了如何将将各个设备的运行状态(布尔值)转换为颜色显示。

文本增强

SVG的原生文本并不支持固定文本框大小。因而也不支持文本的居中、右对齐和自动换行等。OnceVI增加了一种新的Textarea元件,用以支持大段文本的展示 和HTML标签的支持。

 

图表支持

OnceVI支持各种图表的展示,您只需在设计界面绑定一个值为二维数组的字段即可。

图表还支持多维数据的呈现,您只填写好相应的数据即可。图表字段的数据源第一个数组是X轴的坐标值。如下所示:

"chart": [
    ["Category", "A", "B", "C", "D", "E", "F", "G", "H"],
    ["Apple", 94.8, -75.4, -101.1, 165.5, -21.76, 125.5, 80.5, -70.7],
    ["Orange", -1.605, -29.63, -43.04, 184.4, -0.605, 184.8, 60.4, -66.2],
    ["Banana", 44, 104.2, -19.82, 291.4, 7.29, 116, -138., -102.9]
]

绑定上不同的图表后的绘制效果:

实时刷新和动画

您可以添加刷新间隔时间来动态刷新你的报表,数据的变化将会以动画渐变的形式展现到报表界面上如颜色、尺寸、高度、数量等。在"Data Binding"界面上设置 "Refresh Interval" 即可,"Refresh Interval" 表示数据刷新间隔,"0"表示不刷新数据,单位为秒。借助OnceDoc Proxy刷新不会对影响后台数据分析服务的性能。


Once VI: http://oncevi.com

DEMO: http://cn.oncedoc.com/page/view/oncevi-demo

如果您有企业报表的购买以及定制需求,请咨询:  newghost@cn.oncedoc.com



原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 在OnceIO(Node.JS)中用Redis储存Session
  2. 开源项目 RethinkDB 关闭,创始人总结失败教训
  3. GitHub 第一坑:换行符自动转换
  4. OnceDB支持全文搜索和关系查询的Redis内存数据库:驱动安装及使用教程
  5. Github Pages疑似被封: 再也不能用Pages搭建个人博客了
  6. 关于华为优化30、40老员工的争议
  7. AirJD-简单好用的免费建站工具

 相关阅读 - 技术前沿
  1. 关于华为优化30、40老员工的争议
  2. GitHub 第一坑:换行符自动转换
  3. NodeJS连接Redis:在(Raspberry Pi)树莓派上安装Redis并设置开机自动启动服务
  4. 传言GITHUB正在寻求第二轮融资,或面临估值下降、清算或被微软收购
  5. 2016年收入最高的5个编程语言,JavaScript最流行,Java和C没在前5
  6. Java 之父求职被嫌年纪大,硅谷公司现在喜欢“小鲜肉”,不爱“老古董”
  7. GitHub2016报告AngularJS流行度下降,JavaScript活跃度为Java两倍
  8. 使用Bootstrap、Electron和JavaScript开发桌面应用
  9. Redis和Memcached的区别-从源码解读Reids的实现原理
  10. 三星拟收购NodeJS主要赞助商Joyent

 关键字 - 分享
  1. 【示例教程】如何使用LEADTOOLS图像标注控件在界面上对图像进行标注
  2. 有了大数据加智能,你愿把荷包交给机器打理吗?
  3. 【更新】视频处理软件BB FlashBack更新至v5.27,提高摄像头FPS
  4. 【教程】FileAudit入门的基本要求
  5. MyEclipse项目迁移常见问题解答
  6. DevExpress v17.2新版亮点—WinForms篇(一)
  7. 高报酬寻安卓APP马甲和iOS马甲上架技术人员, 上架一个最高30000元
  8. 六款互联网人不容错过的软件神器
  9. 【示例教程】如何通过leadtools读取二维码中的中文
  10. 【更新】Windows网络守门人UserLock更新至v9.6,可通过Webhooks获取实时登录通知

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号