如何在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 

 

3.导入下载的元件库

 

 

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

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

  • 分析元件的组成 

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

      

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

                                       

  • 19
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 20
    评论
### 回答1: Axure可以通过以下两种方式加载动态图表: 1. 使用Axure自带的图表控件:Axure提供了多种图表控件,包括柱状图、折线图、饼图等,这些控件支持数据绑定,可以通过设置数据源来动态生成图表。你可以在Axure的“部件”面板找到这些图表控件,并将其拖拽到画布,然后通过设置数据源和样式等属性来生成动态图表。 2. 使用第三方插件:除了Axure自带的图表控件,还有一些第三方插件可以帮助你在Axure加载动态图表,比如Easychart、Prototyping on Paper等。这些插件通常提供更多的图表类型和样式,并且支持更高级的数据绑定和交互功能。如果你需要更加复杂的图表功能,可以考虑使用这些插件。 ### 回答2: Axure是一款功能强大的原型设计工具,可以方便地创建交互式和动态的原型。要加载动态图表,可以按照以下步骤进行操作: 1. 第一步是准备好需要使用的图表数据。可以使用Excel或其他数据源创建一个包含动态数据的表格。 2. 在Axure,创建一个新页面或打开一个已有的页面。 3. 在页面上选择一个合适的位置,添加一个可滚动的区域或者创建一个空白对象,用来放置图表。 4. 在Axure的“常规”选项卡上,选择“插入部件”并选择“交互式部件”下的“HTML”。 5. 在弹出窗口的“HTML 代码”框粘贴以下示例代码: ``` <div id="chartContainer" style="height: 300px; width: 100%;"></div> <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> <script> window.onload = function() { var chart = new CanvasJS.Chart("chartContainer", { // 在这里设置你的图表样式和数据 data: [ { type: "column", dataPoints: [ { label: "苹果", y: 10 }, { label: "香蕉", y: 15 }, { label: "橙子", y: 25 }, { label: "葡萄", y: 30 }, { label: "西瓜", y: 28 } ] } ] }); chart.render(); } </script> ``` 请确保带有CanvasJS链接的脚本可以在你的网络环境下访问。 6. 将示例代码的样式和数据以及图表类型改为符合你的需求。 7. 点击“确定”按钮后,你将在页面上看到一个动态图表。 通过这种方式,你可以使用Axure加载动态图表,向用户呈现更加生动和交互性的原型设计。 ### 回答3: Axure是一款功能强大的原型设计工具,可以使用其加载动态图表。下面是一个简单的步骤: 1. 首先,确保已经安装并打开了Axure软件。 2. 在Axure主界面上选择一个适合的页面布局或创建一个新的页面。 3. 在页面上选择合适的位置放置一个动态图表的容器。可以使用矩形工具或者其他图形工具进行绘制。 4. 在目标页面上创建一个自定义交互状态,以便在加载和更新图表时进行切换。 5. 在资源管理器面板,导入或创建用于显示动态数据的图表样式,例如柱状图、折线图等。这些图表样式可以是图片、矢量图形或应用Axure的默认图像库。确保为这些图表添加自定义交互状态。 6. 在图表容器上右键单击,选择“设置交互动作”。 7. 在交互动作窗口,选择“动态面板”或“组件交互”选项,并单击“添加动作”按钮。 8. 根据需要选择适当的动作类型,例如“显示”或“隐藏”图表。 9. 设置动作的触发条件,这可以是点击按钮、页面加载完成等。 10. 在动作步骤,指定图表的目标位置,这可以是某个面板或组件。 11. 在图表的目标位置上选择动态数据,可以是从外部导入的数据文件或是在Axure创建的模拟数据。 12. 确保已经添加了适当的数据源,并在图表样式设置了相应的数据绑定。 13. 完成设置后,点击“确定”保存交互动作设置。 14. 播放原型以验证是否正确加载和显示动态图表。 通过上述步骤,就可以在Axure加载动态图表,并进行一些交互操作,如显示、隐藏、更新数据等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 20
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值