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


发布者 ourjs  发布时间 1489674484725
关键字 JS学习  JavaScript 

什么是数据可视化


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

制作名片模板

我们首先要制作名片模板,因为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中还支持各类图表,表格的呈现。您甚至可以在完成绑定后再次将矢量图用第三方软件进行编辑。我们将在随后的文章中逐一介绍。