Highcharts实现Axure动态可视化图表 – Axure中文学习网
axure商城

Highcharts实现Axure动态可视化图表

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

效果呈现:

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

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

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

2022-7-13 9:02:08

原型案例

【原型推荐】第8期 客户关系管理系统知多少?

2019-6-2 22:16:18

axure商城
5 条回复 A文章作者 M管理员
  1. Wewill

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

  2. Andy158231

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

  3. Andy158231

    那个js也是个广告,哈哈

  4. Andy158231

    看起来很不错

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