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

Demo文件下载点击此处下载Demo（访问密码：9209）

1、前言

上章“Axure嵌入图表之Echarts图表”实现Axure嵌入Echarts，有兴趣的可以回顾Axure嵌入图表之Echarts图表 ，用同样的方法以来实现Highcharts图表的嵌入

2、Highcharts图表生成

在Highcharts的官网上实现出想要的图表设计如下图，并复制好js代码；

var chart = Highcharts.chart('container', {
        title: {
                text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
        },
        subtitle: {
                text: '数据来源：thesolarfoundation.com'
        },
        yAxis: {
                title: {
                        text: '就业人数'
                }
        },
        legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
        },
        plotOptions: {
                series: {
                        label: {
                                connectorAllowed: false
                        },
                        pointStart: 2010
                }
        },
        series: [{
                name: '安装，实施人员',
                data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
        }, {
                name: '工人',
                data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
        }, {
                name: '销售',
                data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
        }, {
                name: '项目开发',
                data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
        }, {
                name: '其他',
                data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
        }],
        responsive: {
                rules: [{
                        condition: {
                                maxWidth: 500
                        },
                        chartOptions: {
                                legend: {
                                        layout: 'horizontal',
                                        align: 'center',
                                        verticalAlign: 'bottom'
                                }
                        }
                }]
        }
});

3、Highcharts js注入

3.1、容器创建

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

3.2 javacript注入

3.2.1 增加交互事件

增加交互事件，【载入时】打开链接，【超链接到】写入javascript 的代码实现highcharts的引用(highcharts的代码复制出来)，如下图

3.2.2 javacript编写

方法一

通过axure自身的axutils.js实现echarts.js加载，由于通JS加载不知道什么时间加载完，因此要用setTimeout做个延迟函数。
$axure.utils.loadJS()函数说明参考Axure API 加载js、css文件
其javascript 的代码如下：

javascript:
axure.utils.loadJS('http://cdn.highcharts.com.cn/highcharts/highcharts.js');
var dom =('[data-label=Charts]').get(0);/* 矩形名称*/

setTimeout(function(){
/* highcharts 代码 替换掉'container'换成dom ,两边的引号也要去掉*/
}, 2500);

方法二

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

javascript:
.getScript('http://cdn.highcharts.com.cn/highcharts/highcharts.js',function(){
    var dom =('[data-label=Charts]').get(0);
/*Highcharts代码，把'container'改成dom,两边的引号也要去掉;*/
}
);

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

javascript:
.getScript('http://cdn.highcharts.com.cn/highcharts/highcharts.js',function(){
    var dom =('[data-label=Charts]').get(0);
    HighchartsInit(dom)
}
);

function HighchartsInit(dom)
{
/*Highcharts代码，把'container'改成dom,两边的引号也要去掉;*/
}

3.3效果

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

3、其他问题

1、unexpected end of input
a、很可能是你javascript 里有注释用的是“//XXXXXX”，要去掉，注释用“/xxxxxx/”的形式。
2、 “Uncaught TypeError: Cannot read property ‘getAttribute’ of undefinedat echart”出现这个问题时：
a、Axure矩形的名字与js代码里的矩形名称（data-label）的名字不一样；