利用Axure加载javascript脚本的方式动态引入Echarts图表 获赏10金币 基础教程

lsyjohn 普通用户 2020-2-5 3547

前言

目前各种数据可视化界面越来越多,在原型设计中也需要加入各种图表效果,而Axure本身没有自带图表元件,因此自能自己重新绘制或者引入第三方元件。常用的有以下几种:

1、直接绘制

利用Axure的矩形元件和线条直接绘制,或者通过AI、PS等第三方软件绘制以后截图粘贴过来。这种方式制作比较麻烦,如果图表数量很少,后期改动少的话,可以采用这种方式。

2、利用EChart、Highchart等图表库在线生成图表,然后通过以下方式引入:

1)截图引入,将编辑好的图表直接截图到Axure中,方便快捷,一般也能满足要求,但无法保留原Echarts图标的各种交互提示功能;

2)将EChart、Highchart中的实例下载为html页面,然后通过Axure中的内联框架引入。通过这种方式引入,相当于在内联框架所在区域单独引入了一个页面,此时该区域的背景将由引入的页面决定,同时内联框架的大小必须和引入页面相匹配的,不然会出现挤压情况。下面图示为操作步骤,先在EChart上编辑好以后,Download该页面,放在本地文件夹。

然后在Axure中插入一个内联框架,链接到文件所在位置即可。该种方式引入时,不能通过预览进行查看,只能生成html页面后才能查看。


从动图中可以看到,显示时会弹出“百度未授权使用地图API....."的提示,我们用Notepad++打开,把除第一行引用echarts.min.js的其它script引用删除即可。

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

1)内联框架的大小要合适,否则显示会出现挤压;

2)必须生成本地html页面后才能看到引入的图表;

3)图表区域背景无法设置成透明,从下图就可以看出,左边是通过内联框架引入的,右边是通过后面马上介绍的通过加载javascript脚本的方式动态引入Echarts图表。

通过javascript伪协议直接执行ECharts、Highchart的代码,动态引入图表

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

1、首先,在Axure中插入一个矩形框,作为Echars图表绘制的容器,并命名为test,名字可以自定义。为了和上面对比,下面先画了一个矩形框作为背景。

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

3、代码的基础框架如下所示,首先引入Echarts库文件,然后在定时器中执行图标绘制代码,先获取前面插入的矩形框,作为图表绘制的容器,然后进行初始化。只需要将Echarts官网中的示例代码的option部门内容拷贝到代码中的option位置即可。然后将代码整体复制到上面的Axure中的编辑框中。

javascript:
//引入ECharts库
var script = document.createElement('script');
script.type = "text/javascript";
script.src ="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";
document.head.appendChild(script);
    //获取插入的矩形框对象,test是上面取得名字,如果是其它名字,则进行替换
    //这里用了定时器来延迟图表载入时间,测试时发现刚引入ECharts库就执行图形代码可能会出错。
    setTimeout(function(){
    //获取插入的test矩形框,作为图表绘制的容器,如果前面矩形框为其它名字,则test改为对应的名字
    var dom =$('[data-label=test]').get(0);
    //初始化
    var myChart = echarts.init(dom);
    
    var option = {
        /*在此处粘贴ECharts官网的示例代码*/
    };
    //设置数据
    if (option && typeof option === "object"){
       myChart.setOption(option, true);    
    }}, 800);

代码复制到Axure中时需要去掉其中的所有汉字注释代码,下面为去掉注释的版本。

javascript:
var script = document.createElement('script');
script.type = "text/javascript";
script.src ="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";
document.head.appendChild(script);
setTimeout(function(){
    var dom =$('[data-label=test]').get(0);
    var myChart = echarts.init(dom);
    
    var option = {
        
    };
    
    if (option && typeof option === "object"){
       myChart.setOption(option, true);    
    }}, 800);

我们将上面的代码拷贝到test矩形框中的编辑框中,然后从EChart中找到想要展示的图表,然后将左边中的option代码全部复制,然后替换掉上面代码中的option={};部分,点击预览即可查看(需要联网)。


从预览中可以看到,图表本身的背景色为透明色,因此会显示出Axure中设置的背景色。通过该方式引入的图表可以实时预览查看,并可以显示Axure中设置的背景色,保留Echarts图表本身的交互动画,但是需要联网。

脱机使用方法

如果脱机使用的话按一下方法:

把官网下载的js文件放在Axure的安装目录下面,具体为D:\Program Files (x86)\Axure\Axure RP 9\DefaultSettings\Prototype_Files\resources目录下,只要在这个目录下就可以正常引用,推荐放在该目录下的scripts文件夹中。

然后在引用代码中改为script.src ="resources/scripts/echarts.min.js"即可。这样在生成html源文件的时候,该js文件会一同被复制到目标目录中,这样我们直接运行html文件也可以正常显示。

对于Hightchart或者其它的javascript图标库均可采用类似的方法进行引入,借助Echarts官网中提供的表格工具,我们可以很方便的将excel中的数据转为代码可用的数组,从而可以更方便的使用Echart进行数据的展示。

https://www.axureshop.com/shop/24308中有一些综合实战案例,欢迎大家下载交流学习。

axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (60)
  • 围城AD 普通用户 13天前
    0 引用 61
    感谢分享
  • sunpoo 普通用户 1月前
    0 引用 60
    66666
  • qzl123 普通用户 1月前
    0 引用 59
    感谢分享
  • z0um 普通用户 1月前
    0 引用 58
    666
  • dl0224 普通用户 5月前
    0 引用 57
    请问这种是否只支持简单的图表显示?这个方法没法显示echats里的柱形图Bar Label Rotation,试了其它的图表只有部分能正常显示出来
  • atomcow 普通用户 5月前
    0 引用 56
    谢谢大牛
  • yanghong 普通用户 5月前
    0 引用 55
    感谢分享,已获得10金币奖励!
  • heichis 普通用户 6月前
    0 引用 54

    沈十三 管理员 8月前
    0 2楼
    感谢分享,已获得10金币奖励!
  • gongcxx 普通用户 6月前
    0 引用 53
    谢谢分享。
  • leeyaoer 普通用户 6月前
    0 引用 52
    感谢分享
  • vigo 普通用户 6月前
    0 引用 51
    66
  • lsyjohn 普通用户 7月前
    0 引用 50
    落月_1600407948 如何在一个axure中插入多个echarts啊?


    按文中步骤插入多个矩形框,命名为不同的名字,在各个矩形框的载入代码中的这一句改为对应的矩形框名字就可以。

  • 阿宽 普通用户 7月前
    0 引用 49
    找了好久 终于有个讲明白的了
  • 落月_1600407948 普通用户 7月前
    0 引用 48
    如何在一个axure中插入多个echarts啊?
  • llxiaofan 普通用户 7月前
    0 引用 47
    谢谢分享。
  • yeyulan 普通用户 7月前
    0 引用 46
    ganxie
  • super_987329 普通用户 7月前
    0 引用 45

    补充(亲测有效):
    1.注意矩形框命名为test,以保持和代码里[data-label=test]的“test”一致,如果想自定义请注意同步修改代码
    2.粘贴echart代码的时候把var option={ } 全部覆盖(包括var)
    3.粘贴后,如果echart代码里有注解,一定要把注解 (//xxxxx)全部删除

  • Jeely 普通用户 7月前
    0 引用 44
    感谢分享!!
  • ensel 普通用户 8月前
    0 引用 43
    感谢分享!!
  • howl 普通用户 8月前
    0 引用 42
    先试一下,有结合中继器的使用案例吗?我看axhub自己去实现了一套。
  • serena1008 普通用户 8月前
    0 引用 41
    感谢
  • vell 普通用户 9月前
    0 引用 40
    感谢分享
  • 老K 普通用户 9月前
    0 引用 39
    3Q
  • 小麦旋风 普通用户 9月前
    0 引用 38
    感谢
  • 徐先森 普通用户 9月前
    0 引用 37
    感谢大佬分享
  • 早云 普通用户 10月前
    0 引用 36
    666。。。
  • wyb0805 普通用户 10月前
    1 引用 35

    请问为啥我的javascript预览是白板,看了下也没有中文的注释,官方示例也不行,f12浏览器报:echarts.min.js:22 Uncaught TypeError: Cannot read property 'getAttribute' of undefined
        at echarts.min.js:22
        at mf (echarts.min.js:22)
        at Object.t.init (echarts.min.js:22)
        at <anonymous>:1:251

    -----已解决,我矩形的名字没改,改了就可以了,谢谢楼主

  • Peach_1590397758 普通用户 11月前
    1 引用 34

    javascript伪协议方法,无法复现,不管预览还是html文件,打开都是一片空白。

    -- 5/25 更新:用官方的图例可以正常预览展示,换成自己写的代码就不行了,什么问题?


    解决了。代码复制到Axure中时需要去掉其中的所有汉字注释代码。

    谢谢大神!

  • Eric_1589942460 普通用户 11月前
    0 引用 33
    地图引入还是空白
  • Eric_1589942460 普通用户 11月前
    0 引用 32
    感谢分享
  • 两面三刀 普通用户 11月前
    0 引用 31
    感谢
  • walkerq 普通用户 11月前
    0 引用 30
    感谢分享
  • 王辉GX 普通用户 11月前
    0 引用 29
    谢谢分享!
  • Elesar 普通用户 11月前
    0 引用 28
    感谢
  • 三村 普通用户 11月前
    0 引用 27
    谢谢楼主分享,试一下呢
  • xiezhang6263 普通用户 11月前
    0 引用 26
    感谢分享
  • PxxFFF® 普通用户 12月前
    0 引用 25
    谢谢
  • lemon_1583160942 普通用户 12月前
    0 引用 24
    谢谢分享!
  • °Distance 普通用户 2020-4-19
    0 引用 23
    谢谢分享
  • sunero 普通用户 2020-4-17
    0 引用 22
    谢谢分享
  • tutubaba 普通用户 2020-4-17
    0 引用 21
    谢谢分享
  • i.zhw 普通用户 2020-4-16
    0 引用 20
    谢谢分享
  • 小辉_1587021010 普通用户 2020-4-16
    0 引用 19
    感谢分享
  • gxcdkey 普通用户 2020-4-13
    0 引用 18
    666............
  • 汪洋 普通用户 2020-4-12
    0 引用 17
    感谢分享
  • eternal1004 普通用户 2020-4-12
    0 引用 16
    感谢分享
  • lsyjohn 普通用户 2020-3-30
    0 引用 15
    coolsprite 感谢分享,但好像还是白板啊。。
    演示demo打开也是白板?
  • coolsprite 普通用户 2020-3-30
    0 引用 14
    感谢分享,但好像还是白板啊。。
  • jiangyang 普通用户 2020-3-25
    0 引用 13
    666
  • 寻梦 普通用户 2020-3-25
    0 引用 12
    很有帮助,谢谢!
  • liaoshaojielsj 普通用户 2020-3-24
    0 引用 11
    我只想说  太赞了!
  • champion250 普通用户 2020-3-21
    0 引用 10
    感谢分享
  • Eee 普通用户 2020-3-19
    0 引用 9
    我要资源
  • 真以航(熊岳南京) 普通用户 2020-3-10
    0 引用 8
    感谢分享
  • Wujungang 普通用户 2020-2-17
    0 引用 7
    感谢分享
  • as001 普通用户 2020-2-14
    0 引用 6
    感谢分享
  • lsyjohn 普通用户 2020-2-10
    0 引用 5
    risingsun js是不是可以下载下来放到文件目录下?

    可以,但是不能直接和rp源文件放在一起,这样引用会出问题(好像是访问跨域的问题)。可以把js文件放在Axure的安装目录下面,具体为D:\Program Files (x86)\Axure\Axure RP 9\DefaultSettings\Prototype_Files\resources目录下,只要在这个目录下就可以正常引用,推荐放在该目录下的scripts文件夹中。

    引用的时候改为script.src ="resources/scripts/echarts.min.js"即可。这样在生成html源文件的时候,该js文件会一同被复制到目标目录中,这样我们直接运行html文件也可以正常显示。

  • risingsun 普通用户 2020-2-10
    0 引用 4
    js是不是可以下载下来放到文件目录下?
  • Mr.He 普通用户 2020-2-8
    0 引用 3
    666。。。
  • 沈十三 管理员 2020-2-6
    0 引用 2
    感谢分享,已获得10金币奖励!
返回
axure商城