【高级教程】javascript嵌入图表

#推荐

【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的引用，如下图

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

}