【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】里的一致)。
2.2 javacript注入
2.2.1 增加交互事件
增加交互事件,【载入时】打开链接,【超链接到】写入javascript 的代码实现echarts的引用,如下图