#推荐
【高级教程】javascript嵌入图表

2024-07-03 0 892

【Auxre 高级教程】javascript嵌入图表

用Axure做Web原型设计时,经常会有图表。特别是大屏或者数据可视化的原型中就更为常见。Axure可以通过javascript注入的方法进行拓展,而Echarts作为流行的Web图表工具,因此下文将简单介绍如何通过javascript引用Echarts实现图表设计。

1、Echarts图形生成

option = {

    xAxis: {

        type: ‘category’,

        data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]

    },

    yAxis: {

        type: ‘value’

    },

    series: [

        {

           data: [150, 230, 224, 218, 135, 147, 260], type: ‘line’

        }

    ]

};

2、Axure 引用

2.1 创建容器

在axure界面里拖入矩形,并命名为“Charts” (可以自己定义名称,但要与js代码【data-label】里的一致)。

【高级教程】javascript嵌入图表

2.2 javacript注入

2.2.1 增加交互事件

增加交互事件,【载入时】打开链接,【超链接到】写入javascript 的代码实现echarts的引用,如下图

【高级教程】javascript嵌入图表

2.2.2 javacript编写

方法一

通过axure自身的axutils.js实现echarts.js加载,由于通过js加载不知道什么时间加载完,因此要用setTimeout做个延迟函数。

其javascript 的代码如下:

javascript:

$axure.utils.loadJS(‘https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js’);

setTimeout(function(){

    var dom =(‘[data-label=Charts]’).get(0);/*矩形的名字要一致,默认写了Charts*/

    var Chart = echarts.init(dom);

    var option = {

    /*echarts的代码写在这里*/

    };

    if (option && typeof option === “object”){

        Chart.setOption(option, true);

    }}, 2000);

方法二

通过jquary加载charts.js,完成后再运行Ehcarts代码,这样加载完成后直接显示,更加顺畅快捷。

其javascript 的代码如下:

javascript:

$.getScript(‘https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js’,function(){

    var dom =(‘[data-label=Charts]’).get(0);/*矩形的名字要一致,默认写了Charts*/

    var Chart = echarts.init(dom);

    var option = {

/*echarts的代码写在这里*/

    };

    if (option && typeof option === “object”){

        Chart.setOption(option, true);

    };

}

);

还可以简单改造下,每次只要在ChartsInit函数里写里粘贴ehcarts全部代码就即可,更加方便;

javascript:

.getScript(‘https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js’,function(){

    var dom =(‘[data-label=Charts]’).get(0);/*矩形的名字要一致,默认写了Charts*/

    var Chart = echarts.init(dom);

    var option =ChartsInit();

    if (option && typeof option === “object”){

        Chart.setOption(option, true);

    };

}

);

function ChartsInit() {

    /*echarts的完整代码写在这里*/

    return option

}

2.3效果

点击预览就可看到引用ehcarts的效果(用的是chrome浏览器)

【高级教程】javascript嵌入图表

3、其他问题

1、 “Uncaught TypeError: Cannot read property ‘getAttribute’ of undefinedat echart”出现这个问题时:

a、Axure矩形的名字与js代码里的矩形名称(data-label)的名字不一样;

2、unexpected end of input

a、很可能是你javascript 里有注释用到了“//”,要去掉,只能用/**/。

收藏 打赏

感谢您的支持,我会继续努力的!

扫码打赏,加速更新更多文章。
常见问题
  • 本站资源版权属 AxureMost.cn 所有。任何非官网途径下载均属于盗版,后台有检测机制一经发现传播,共享,出售会起诉追会本站损失。
查看详情
  • 请比对下载完压缩包的与网盘上的容量。
查看详情
发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务