关于Axure中引入图表的几种方式 操作步骤是什么?

李冰琪            来源:优草派

可视化如今在数据时代显得愈发重要,原型中加入图表效果能更真实地模拟真实环境以及开发效果,而Axure本身没有自带图表元件,因此只能自己绘制或者引入第三方元件。本文小编来教大家在Axure中引入Echarts图表的几种方式。

关于Axure中引入Echarts图表的几种方式 操作步骤是什么?

方法一:

在Echarts软件中制作好图表之后,将编辑好的图表直接截图到Axure中,这个方法方便高效,但无法保留原Echarts图标的各种交互提示功能。

方法二:

EChart中的图标实例下载为html页面的格式,通过内联框架的功能引入到axure软件中去,链接到文件所在位置即可。这种引入方式不能通过预览进行查看,只能生成html页面后才能查看。

利用内联框架引入,可以保留Echarts图表原来的交互,但要注意以下几点:

· 需要置入合适大小的内联框架,否则显示会出现挤压。

· 必须生成本地html页面后才能看到引入的图表。

· 图表区域背景无法设置成透明。

方法三:

Axure支持通过javascript伪协议执行javascript代码,因此可以引入Echarts的js库,然后直接在Axure中执行图表的绘制代码。

1)首先我们需要在Axure中绘制矩形框,作为Echars图表绘制的容器,并自定义名称。

2)然后插入一个载入时事件(如果要单击时才出现,可以插入单击事件),用来触发javascript伪协议的执行。选择“链接到URL或文件路径“,点击fx,在弹出的窗口中可以输入javascript伪协议代码。

以上就是关于Axure中引入Echarts图表的几种方式,大家可以根据习惯选择其中一种进行操作练习,熟练掌握运用在axure中插入图表的方法。

【原创声明】凡注明“来源:优草派”的文章,系本站原创,任何单位或个人未经本站书面授权不得转载、链接、转贴或以其他方式复制发表。否则,本站将依法追究其法律责任。
TOP 10
  • 周排行
  • 月排行