Axure中利用Highcharts进行动态图表展现 获赏10金币 案例教程 基础教程

pmliutao 靠谱青年 4月前 926

好久没有在PMYES上更新东西了,今天给大家分享一个如何在Axure中利用Highcharts进行动态图表展现,废话少说直接进入主题。

在制作图形图表的时候,大家都会遇到一些常见图表的展现,如饼状图、折线图、柱状图、对比图等展示,使用Axure自己取制作图表信息的话,工作量是有一些的,制作出来的效果有时候也会差强人意,对于一些入门的PM来说,可能函数关系以及动态不好操作,接下来介绍下利用第三方插入进行图表展示;

1、打开Axure,新建一个界面起名为动态模型展示

2、插入一个标题,设置大小格式尺寸为760*30;

3、在标题底部插入一个内联框架,设置尺寸和标题宽度保持一致,高度设置为图表展现高度,这里我根据图表大小设置为760*457

4、打开Highcharts官网(https://www.highcharts.com.cn),找到【Highcharts演示】,选择需要的图表点击进入;

5、选择好以后,点击编辑源代码进入界面,若是数据不是想要的可以通过修改左侧JavaScript 代码进行数据编辑;

6、数据修改完成后,点击分享按钮,选择【分享全屏结果】中的代码,复制代码;

7、回到Axure中,双击内联框架,将复制的地址粘贴到URL链接中,点击保存后,图表引用完成,点击发布后就可以看效果了;


备注:在Highcharts中可以注册一个账号,将自己做好的表保存起来方便下次使用,也为自己积累资源;也可以使用其他图表进行展现,本次演示中只用了一个折现对比图,大家可以根据需要自行选择即可。

附上原型可以下载;


感谢大家观看,希望大家能够喜欢!



axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (25)
  • ella11 普通用户 7天前
    0 引用 26
    楼主辛苦啦
  • 单单 普通用户 14天前
    0 引用 25
    感谢分享!
  • 真以航(熊岳南京) 普通用户 24天前
    0 引用 24
    感谢分享
  • lemon_1583160942 普通用户 1月前
    0 引用 23
    感谢分享!
  • pmliutao 靠谱青年 1月前
    0 引用 22
    creatdreammer 今天初次关注这快,初次看到这个折线图,请问下excel不是也可以实现这种统计图表么
    嗯 是的 Excel也可以做成报表展示,利用Highcharts可以进行图表加载的动态展示,主要是效果方面呈现会好一些,Excel做成图表也可以,形式不一样而已,希望可以解答你的问题
  • creatdreammer 普通用户 1月前
    0 引用 21
    今天初次关注这快,初次看到这个折线图,请问下excel不是也可以实现这种统计图表么
  • SteveD 普通用户 1月前
    0 引用 20
    谢谢分享
  • 小杰_1582616374 普通用户 1月前
    0 引用 19
    感谢分享
  • KamHung 普通用户 1月前
    0 引用 18
    感谢分享
  • szuzsq 普通用户 1月前
    0 引用 17
    真的很好.
  • 黄_1580702855 普通用户 2月前
    0 引用 16
    感谢分享 
  • itwxf 普通用户 2月前
    0 引用 15
    还是那么欣赏你
  • 小宝_1578031532 普通用户 2月前
    0 引用 14
    正是需要的,感谢
  • 千载难逢 普通用户 2月前
    0 引用 13
    感谢分享
  • Teresa.Li 普通用户 3月前
    0 引用 12
    感谢分享
  • 不死鸟 普通用户 3月前
    0 引用 11
    猜猜猜
  • 江磊 普通用户 3月前
    0 引用 10
    感谢分享
  • pennyxmn 普通用户 3月前
    0 引用 9
    感谢分享!
  • 柚子哇咔 普通用户 3月前
    0 引用 8
    感谢
  • 姚嘉鑫 普通用户 3月前
    0 引用 7
    感谢分享
  • pmliutao 靠谱青年 4月前
    0 引用 6
    符号 Highcharts很多是有版权的,使用要注意场景。
    这里主要是交给大家如何操作使用Highcharts,感谢这位朋友的留言和指点,多谢   
  • 符号 普通用户 4月前
    1 引用 5
    Highcharts很多是有版权的,使用要注意场景。
  • lshdjbb 普通用户 4月前
    0 引用 4
    感谢分享666
  • pmliutao 靠谱青年 4月前
    0 引用 3
    沈十三 感谢分享,获得10金币奖励!
    谢谢 
  • 沈十三 管理员 4月前
    0 引用 2
    感谢分享,获得10金币奖励!
返回
axure商城