axure商城

Highcharts实现Axure动态可视化图表

大家在用元件画图表的过程,需要修改其大小、数据、标签、颜色以及横纵坐标等信息,当遇到数据较多的时候是不是就比较急躁了呢;Axure作为一个强大的原型办公软件,必然有它的独门妙招,下面小编就给大家分享一个比较快捷的方式吧!(当然制作动态可视化图表的方法有很多,如果有更便捷的方法欢迎大家评论区分享👉)

效果呈现:

Highcharts实现Axure动态可视化图表

步骤一:首先在面板中拖入内联框架,需要几个图表就放几个,小编这里就只演示两个啦~ Highcharts实现Axure动态可视化图表
步骤二:打开Highcharts官网,选择你需要的图表类型,然后点击编辑源代码。(在这里可能有小伙伴会说为什么不用Echars呢?小编肯定是尝试过啦,Echars图表链接会显示官网头标,在设计原型的时候肯定就不美观啦,而Highcharts图表有分享全屏的功能,只会显示你编辑过的图表)Highcharts实现Axure动态可视化图表
步骤三:在代码编辑器中修改自己想要的数据就好啦~Highcharts实现Axure动态可视化图表Highcharts实现Axure动态可视化图表
步骤四:下面是小编改变颜色后的样子~(这里一定要记得点击保存!!!)点击分享下载,复制分享全屏结果链接,然后回到Axure
Highcharts实现Axure动态可视化图表
步骤五:双击内联框架,粘贴链接,点击确定,点击预览就好啦;在面板中调节内联框架的大小,或者也可以在代码编辑里面修改hight、width数值。(确实这里在面板中看不到效果挺不方便的)
超超超超超超超超小声:
Highcharts实现Axure动态可视化图表
Highcharts实现Axure动态可视化图表
步骤六:同样的方法,小编又制作了一个圆环,如果这里大家觉得边框影响美观,可以在面板右侧勾选,去掉边框就好啦!
Highcharts实现Axure动态可视化图表
步骤七:这样就制作完成啦~快冲冲冲!!!!!!(如过后面想修改图表,在预览中点击图表右上角的三条横杠就可以直接进入代码编辑器啦~)
Highcharts实现Axure动态可视化图表

给TA打赏
共{{data.count}}人
人已打赏
高级教程

让高保真原型动起来!这个宝藏网站你值得收藏

2022-7-13 9:02:08

高级教程

【Axure教程】拖拉拽移动地图

2023-1-16 11:08:52

axure商城
7 条回复 A文章作者 M管理员
  1. 小陌

    你们访问的网站,和我一样吗?为啥我这没有在线实例呢?图表都没有找到一个。http://highchartschina.cn/

  2. 小小

    请问一下,我预览的时候可以看到可视化图表,请问怎么不预览的情况下也可以看到可视化图表呀

  3. Wewill

    还是没有Echars方便,Echars对做高保真原型支持度更高,通过Echars做的图表可以在演示的时候直接修改本地中继器中的数据,做到跟真实系统一样的效果,Echars只是调用了图标生成的JS和CSS框架,甚至可以把CSS框架下载到本地Axure的目录里面,发布原型就直接生成了图表,不依靠Echars官网都可以实现。你说的Echars会显示官网头标的问题我没发现。可能是方法不同?

  4. Andy158231

    加了代码屏蔽不到,代码报错是怎么回事呢

  5. Andy158231

    那个js也是个广告,哈哈

  6. Andy158231

    看起来很不错

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索