3_001Axure中利用Highcharts进行动态图表展现

在制作图形图表的时候,大家都会遇到一些常见图表的展现,如饼状图、折线图、柱状图、对比图等展示,使用Axure自己取制作图表信息的话,工作量是有一些的,制作出来的效果有时候也会差强人意,对于一些入门的PM来说,可能函数关系以及动态不好操作,接下来介绍下利用第三方插入进行图表展示:亲测,效果很客观,有研发基础的应该更会感觉到顺手。
1打开Axure,新建一个界面起名为动态模型展示;
3_001Axure中利用Highcharts进行动态图表展现
2插入一个标题,设置大小格式尺寸为76030;
3_001Axure中利用Highcharts进行动态图表展现
3在标题底部插入一个内联框架,设置尺寸和标题宽度保持一致,高度设置为图表展现高度,这里我根据图表大小设置为760
457;
3_001Axure中利用Highcharts进行动态图表展现
4打开Highcharts官网(https://www.highcharts.com.cn),找到【Highcharts演示】,选择需要的图表点击进入;
3_001Axure中利用Highcharts进行动态图表展现
5选择好以后,点击编辑源代码进入界面,若是数据不是想要的可以通过修改左侧JavaScript 代码进行数据编辑;
3_001Axure中利用Highcharts进行动态图表展现
6数据修改完成后,点击分享按钮,选择【分享全屏结果】中的代码,复制代码;
3_001Axure中利用Highcharts进行动态图表展现
7回到Axure中,双击内联框架,将复制的地址粘贴到URL链接中,点击保存后,图表引用完成,点击发布后就可以看效果了;
3_001Axure中利用Highcharts进行动态图表展现
3_001Axure中利用Highcharts进行动态图表展现