如何在Axure中动态加载图表(Axhub Charts)

1.Axhub Charts是基于Echarts和Antv的图表元件库,主要是应用在Axure原型设计

Echarts:https://echarts.baidu.com,源于百度的开源的可视化解决方案

Antv:https://antv.alipay.com/zh-cn/index.html,源于蚂蚁金服的数据可视化解决方案

 

2.下载元件库rplib文件

https://axhub.im/pro/3320ad07d6897b89/#g=1&p=about

如果不想注册的,可以在百度网盘中下载   AxhubCharts.rplib

链接:https://pan.baidu.com/s/1DrysflwBn_SFm1W_YdKVOg 
提取码:5jq2 

如何在Axure中动态加载图表(Axhub Charts)_第1张图片

 

3.导入下载的元件库

如何在Axure中动态加载图表(Axhub Charts)_第2张图片 如何在Axure中动态加载图表(Axhub Charts)_第3张图片

 

4.应用实例(以条形图为例)

  • 拖拽一个条形图到Axure画布上,预览如下,图表中数据是默认的数据,需要根据自己的具体情况进行修改数据

如何在Axure中动态加载图表(Axhub Charts)_第4张图片

  • 分析元件的组成 

如何在Axure中动态加载图表(Axhub Charts)_第5张图片

如何在Axure中动态加载图表(Axhub Charts)_第6张图片

  • 修改图表数据中继器中的数据为自己需求的数据

如何在Axure中动态加载图表(Axhub Charts)_第7张图片      如何在Axure中动态加载图表(Axhub Charts)_第8张图片

我们发现由于背景比较深,而图形图的文字部分颜色较浅,视觉效果不好,这个可以修改图表样式中继器

如何在Axure中动态加载图表(Axhub Charts)_第9张图片   如何在Axure中动态加载图表(Axhub Charts)_第10张图片                                    

你可能感兴趣的:(产品设计)