H5教程|如何零基础在H5中实现数据图表可视化效果?

用户头像
上海/网页设计师/6年前/685浏览
H5教程|如何零基础在H5中实现数据图表可视化效果?

数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。今天,我们使用的H5工具是Epub360来实现数据可视化效果。

数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。今天,我们使用的H5工具是Epub360,下面我们来介绍实现数据图表可视化效果的方法,零基础的你们准备好了吗?

首先,我们先来介绍一下数据图表组件。

数据图表组件简介:

数据图表组件是一款用于数据可视化动态展示的组件,满足各行业数据可视化快速设计需求,借助H5及时传播。

应用场景多为企业月度、季度、年度业绩报表等数据展示;帮助各媒体行业,特别是数据新闻制作更快呈现,实现图、文、音视频、可视化数据在1个H5工具内完成。另,借助意派Epub360的自由定义页面,将适应更多设备场景展示。

目前数据图表组件支持柱状图、折线图、饼状图、散点图、条形图5种图表类型。







组件添加及设置:

1.在高级表单——数据应用组件分类下找到数据图表组件,点击数据图表组件,添加到画布中

2.双击组件,调出数据图表组件设置面板

3.左侧是数据图表的样式展示,可以实时预览效果,右侧面板中的三个设置点击进行切换,设置这一项用于修改数据图表的颜色、文字大小、动态效果等显示效果。

4.右侧面板中的数据是一个类似于Excel的界面,但是比较简单,可以在里面添加我们所需要的数据,最多添加多少行、多少列,暂时没哟限制。鼠标右键单击可以弹出基本的表格操作面板。

5.如果Excel的数据过大或者过小,会造成图表显示不够美观。

6.这时可以通过设置X轴、Y轴的最大最小值来解决,如图:

Epub360 数据图表组件后期将会对该功能继续优化,欢迎提出更多问题建议~


1
举报
|
6
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
智能家居中心 简约 UI设计组件库
【新年UI图标】30个图标
【新年UI图标】钱包icon
手表表盘UI系列
【新年UI图标】旅行icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
科技医疗透明柜UI界面设计
【新年UI图标】秒杀icon
户外旅行飞机情侣假日出行
【新年UI图标】汽车icon
APP/小程序商业项目UI模板|99个高保真UI+79个原型
UI 登录界面设计模板包
UI通用设计素材1
盲盒APP UI设计
拟物风质感写实UI卡片合集源文件
【新年UI图标】体育icon
新拟态风格 UI设计组件库
3D渐变流体抽象矢量UI背景图
【新年UI图标】会员icon
我的钱包-UI界面设计-app
钱包ui模板
3D卡通UI界面图标可爱插画免扣素
UI界面 组件
你可能喜欢
相关收藏夹
大家都在看
登录注册