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

2024-07-03 0 531

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