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

pmliutao 靠谱青年 2019-12-3 4495

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

附上原型可以下载;


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



上传的附件:
登录后回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (41)
  • 飞奔的母猪 普通用户 2020-9-17
    0 引用 42
    感谢分享
  • 宸枫 普通用户 2020-6-27
    0 引用 41
    感谢
  • user003 普通用户 2020-6-23
    0 引用 40
    感谢分享
  • 希子 普通用户 2020-6-22
    0 引用 39
    感谢分享,ECHANT实现不了的报表增加了一种途径
  •         _1592744624 普通用户 2020-6-22
    0 引用 38
    谢谢
  • azerpym1 普通用户 2020-6-19
    0 引用 37
    费资源要回复后才能获取
  • 哆哆 普通用户 2020-6-15
    0 引用 36
    感谢分享
  • Meeko 普通用户 2020-6-10
    0 引用 35
    thanks
  • wangyiming00001 普通用户 2020-5-27
    0 引用 34
    感谢分享
  • 谰夜行_1582094047 普通用户 2020-5-21
    0 引用 33
    这个很不错,感谢大神分享
  • 15079208394 普通用户 2020-5-19
    0 引用 32
    谢谢
  • walkerq 普通用户 2020-5-13
    0 引用 31
    666
  • 星宇垂天 普通用户 2020-5-9
    0 引用 30
    非常感谢,又学到知识了
  • Elesar 普通用户 2020-5-9
    0 引用 29
    感谢
  • 哈迪斯00 普通用户 2020-4-30
    0 引用 28
    3q
  • skyangel 普通用户 2020-4-21
    0 引用 27
    感谢楼主分享
  • ella11 普通用户 2020-3-27
    0 引用 26
    楼主辛苦啦
  • 单单 普通用户 2020-3-20
    0 引用 25
    感谢分享!
  • 真以航(熊岳南京) 普通用户 2020-3-10
    0 引用 24
    感谢分享
  • lemon_1583160942 普通用户 2020-3-3
    0 引用 23
    感谢分享!
  • pmliutao 靠谱青年 2020-2-28
    0 引用 22
    creatdreammer 今天初次关注这快,初次看到这个折线图,请问下excel不是也可以实现这种统计图表么
    嗯 是的 Excel也可以做成报表展示,利用Highcharts可以进行图表加载的动态展示,主要是效果方面呈现会好一些,Excel做成图表也可以,形式不一样而已,希望可以解答你的问题
  • creatdreammer 普通用户 2020-2-28
    0 引用 21
    今天初次关注这快,初次看到这个折线图,请问下excel不是也可以实现这种统计图表么
  • SteveD 普通用户 2020-2-28
    0 引用 20
    谢谢分享
  • 小杰_1582616374 普通用户 2020-2-25
    0 引用 19
    感谢分享
  • KamHung 普通用户 2020-2-20
    0 引用 18
    感谢分享
  • szuzsq 普通用户 2020-2-4
    0 引用 17
    真的很好.
  • 黄_1580702855 普通用户 2020-2-3
    0 引用 16
    感谢分享 
  • itwxf 普通用户 2020-1-16
    0 引用 15
    还是那么欣赏你
  • 小宝_1578031532 普通用户 2020-1-9
    0 引用 14
    正是需要的,感谢
  • 千载难逢 普通用户 2020-1-9
    0 引用 13
    感谢分享
  • Teresa.Li 普通用户 2019-12-18
    0 引用 12
    感谢分享
  • 不死鸟 普通用户 2019-12-17
    0 引用 11
    猜猜猜
  • 江磊 普通用户 2019-12-15
    0 引用 10
    感谢分享
  • pennyxmn 普通用户 2019-12-13
    0 引用 9
    感谢分享!
  • 柚子哇咔 普通用户 2019-12-10
    0 引用 8
    感谢
  • 姚嘉鑫 普通用户 2019-12-6
    0 引用 7
    感谢分享
  • pmliutao 靠谱青年 2019-12-5
    0 引用 6
    符号 Highcharts很多是有版权的,使用要注意场景。
    这里主要是交给大家如何操作使用Highcharts,感谢这位朋友的留言和指点,多谢   
  • 符号 产品大牛 2019-12-5
    1 引用 5
    Highcharts很多是有版权的,使用要注意场景。
  • lshdjbb 普通用户 2019-12-4
    0 引用 4
    感谢分享666
  • pmliutao 靠谱青年 2019-12-4
    0 引用 3
    沈十三 感谢分享,获得10金币奖励!
    谢谢 
  • 沈十三 管理员 2019-12-3
    0 引用 2
    感谢分享,获得10金币奖励!
返回