OurJS


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

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


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

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

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


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

OnceVI报表制作入门—如何将用户的json数据可视化成名片展示


分享到
分类 JS学习   关键字 JavaScript   发布 ourjs  1489674484725
注意 转载须保留原文链接,译文链接,作者译者等信息。  

什么是数据可视化


应用图表或其他图形化手段对数据库中存储的数据进行展示,清晰有效地传达与沟通信息,是数据可视化的主要内容。本节以名片制作为例,将个人数据绑定到名片模板,实现数据可视化过程。

制作名片模板

我们首先要制作名片模板,因为OnceVI报表系统基于SVG开放矢量图形标准,几乎任何设计软件如Adobe的illustrator,AutoCAD等均支持这种文件格式。所以您即可以在OnceVI的设计器中设计您的报表界面,又可以在网上搜索到海量的素材作为参考。比如在Adobe Illustrator中只需将ai格式的设计文件另存为SVG,就可以拿来使用了。

这里我们将一份保存好的svg文件,上传至oncedoc.com中,放在新建的svgtemplate文件夹中。

 

 template of the card

  

创建JSON数据源


为了可视化数据,我们需要创建数据源,您也可以使用 OnceDoc 私有云版的 SqlBuilder 工具来构建数据源,也可使用Java/C#/Python/Go/Php等编程语言创建Web Service作为数据源。

为了方便演示,我们这里直接在OnceDoc中创建了一个JSON文件作为报表的数据源。JSON是一种轻量级的数据交换格式,具有良好的可读性,且便于快速编写,现在广泛应用于不同平台间的数据交换。

JSON 数据的书写格式是:名称/值对。名称/值对包括字段名称(在双引号中),后面写一个冒号,然后是值,json值包括数字,字符串(在双引号中),逻辑值等。JSON对象可以包含多个名称/值对,每个名称/值对以逗号为分隔符。

1) 在OnceDoc中创建JSON文件

OnceDoc支持直接创建代码文件,我们这里创建一个代表用户信息的JSON文件。

 

 json example

 

2) 获取JSON文件地址

当JSON文件创建好后,可通过右键选中目标json文件,选择文件打开方式中的 "文件浏览器" 选项,生成的网页地址即为该JSON文件的访问地址。

 

 url generation

 

完成数据绑定

 


1)  在OnceDoc平台上,右健单击您上传的SVG文件,在"打开方式"下拉框中,选择以 “OnceVI Editor”打开。或者直接单击工具栏上的 ”编辑“。即可进入OnceVI编辑界面。

 

2) 设置数据源

在OnceVI中进行数据绑定前,我们先要设置数据源时。单击 ”Data" > "Edit Data Source" 菜单,弹出如下对话框。将JSON数据源地址填入url 输入框, 然后点击右下角preview,保存后退出。

 datasource

 

2)  绑定字段

下面以绑定公司名称为例,介绍数据绑定流程:

databinding

选定“LogoText”并右键选择 "Data Binding" 选项。在页面右侧将会弹出 "Data Binding" 编辑栏中包含, 其中包含 Target, Attribute 和Binding三个选项。Target即为需要绑定的SVG元件,Attribute为需要绑定目标的属性,text表明目标格式为文本,还可以选择

fill(填充颜色)

width(宽度)

height(高度)

opacity(透明度)

等等。此时,在 "Binding" 选项中选择数据源中的字符串Logo作为绑定的数据。

 

databindcolumn

 

 同样的方法,可以对公司地址,工作人员姓名,职位,联系电话,邮箱和网址等进行数据绑定。

 绑定完成后,您可以单击 “Preview" 图标进行预览,效果如图所示:

 

 

card

 

 

最终效果: http://cn.oncedoc.com/oncevi.player/oncevi.player.html?file=demo/svgtemplate/redcard.svg

OnceVI: http://oncevi.com

 

总结

现在我们完成了一张名片的制作,在OnceVI中完成数据绑定非常简单,我们可以设计不同的模板来呈现数据。在预览界面您还可以保存为PDF,打印,或发送到手机浏览。在OnceVI中还支持各类图表,表格的呈现。您甚至可以在完成绑定后再次将矢量图用第三方软件进行编辑。我们将在随后的文章中逐一介绍。 

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

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 开源项目 RethinkDB 关闭,创始人总结失败教训
  2. OnceDB支持全文搜索和关系查询的Redis内存数据库:驱动安装及使用教程
  3. Github Pages疑似被封: 再也不能用Pages搭建个人博客了
  4. JavaScript条形码生成和扫码识别(Barcode scan)开源库
  5. 关于华为优化30、40老员工的争议
  6. OnceVI前后端分离的数据可视化报表工具简介
  7. 2016 年崛起的 JS 项目
  8. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. OnceDB支持全文搜索和关系查询的Redis内存数据库:驱动安装及使用教程
  2. 在OnceIO(Node.JS)中用Redis储存Session
  3. OnceIO的模块拦截与注入:模板文件路由重定向与Model数据改写
  4. OnceIO模块开发:模块注册、模块路由、静态文件重定向以及如何开发与设计一个功能扩展模块
  5. 少年,不要滥用箭头函数啊:JS中lambda表达式的优缺点和使用场景
  6. NodeJS教程:基于OnceIO框架实现文件上传和验证
  7. 在Debian(Raspberry Pi)树莓派上安装NodeJS
  8. OnceIO(Node.JS)服务器端Cookie设置、添加、删除、显示及其实现原理
  9. OnceIO(Node.JS)的网页(模板)的引用与嵌套
  10. OnceIO(NodeJS)中的服务器端缓存、模板预加载和静态资源文件的缓存和Gzip压缩机制

 关键字 - JavaScript
  1. 可视化Web报表OnceVI中用户输入表单验证与提交
  2. 少年,不要滥用箭头函数啊:JS中lambda表达式的优缺点和使用场景
  3. 如何基于SVG矢量图制作一个可填写信息的可视化表单-OnceVI
  4. OnceVI报表制作入门—如何将用户的json数据可视化成名片展示
  5. AngularJS在大型单页面应用中的性能优化(二)
  6. JavaScript中的继承,构造函数以及new关键字的作用
  7. JavaScript条形码生成和扫码识别(Barcode scan)开源库
  8. NodeBots-JavaScript在智能设备驱动(物联网)中的崛起
  9. 7个最新的实用性 JavaScript MV*框架
  10. 抛弃jQuery,深入原生的JavaScript

 欢迎订阅 - 技术周刊

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


 关注我们

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

ourjs官方微信号