如何通过图标前端插件完成高级可视化图表？笔者在此给出了详细教程，与大家分享~~

后台开发中避免不了实现一些可视化的图表，主要制作的方法有四种：Excel表格截图、Axure图形绘制、Axure网页框架和Axure第三方图表元件。

第三个“Axure网页框架”需要结合antv、echarts、HighCharts等前端可视化插件代码。

第四个“Axure第三方图表元件”，是由技术大佬开发的Axhub Charts图表元件。但是图表的元件数有限，适合快速搭建简单的图表，但是无法满足我们更复杂的图表设计。

因此，想要更高级的可视化图表还是需要通过第三种方法实现。接下来，给大家详细讲解具体方法(此教程以echarts为例)：

ECharts是一款由百度前端技术部开发的，基于Javascript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。

具体实现方法

第一步

从左侧【元件库】拉入一个【内联框架】作为可视化图表的载体。如下所示：

第二步

1. 浏览器打开echarts的可视化图表官网链接地址：https://www.echartsjs.com/examples/zh/index.html

2. 选择符合你要求的可视化图表，点击进入编辑运行页面：此教程以这个复杂的可视化案例讲解，链接如下：https://www.echartsjs.com/examples/zh/editor.html?c=pie-nest

图形如下所示：

点击右下角的【Download】将图表的前端代码下载下来，文件为pie-nest.html。再将此文件放在Axure源文件之前发布生成文件夹里面，如下所示：

你可以在代码编辑器中修改成自己想要的数据指标以及数据项；

3. 双击【内联框架】，选择下面的【链接到url或文件】的选项，并将pie-nest.html链接输入进去。如下所示：

第三步

双击文件夹中的index代码文件，即可查看到刚才链接的可视化图表效果。如下所示：

只能打开生成的文件夹中的对应页面html文件，才能看到图表。

如果从Axure源文件直接点击右上角的【预览】按钮，是无法看到的。出现如下的情况：

教程源文件

百度云教程源文件：https://pan.baidu.com/s/1RRbsnVCp-CstfNL7iG5ILw

提取码: ei5r

作者：火星人～艾斯，公众号：艾斯的Axure峡谷

本文由 @火星人～艾斯原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议

excel可视化图表插件_Axure 教程：利用图表前端插件实现高级可视化图表相关推荐

Xamarin图表开发基础教程（11）OxyPlot框架支持的图表类型
Xamarin图表开发基础教程(11)OxyPlot框架支持的图表类型 OxyPlot组件中支持7种类型的条型图表,分别为普通条形图.线型条形图.矩形条形图.差值图.龙卷风图.普通柱形图和柱形误差图, ...
Xamarin图表开发基础教程（10）OxyPlot框架支持的图表类型
Xamarin图表开发基础教程(10)OxyPlot框架支持的图表类型 OxyPlot组件支持26种图表,这些图表按照功能和样式可以分为4大类,分别为线型图表.条型图表.金融图表和其它图表. 线型图表 ...
Blender教程利用Cell Fracture插件制作破碎效果
推荐:将 NSDT场景编辑器加入你的3D开发工具链效果图一.Cell Fracture简介激活打开Blender,打开用户偏好设置下的插件栏. 选择物体然后选择 Cell Fractur ...
ae灯光插件_AE教程｜Particular粒子插件全面讲解介绍官方视频教程「中文字幕」...
关注并私信"particular"获取教程教程简介 Particular 粒子插件的强大和受欢迎程度,相信不用大脸多介绍,它是AE软件中最常用的一款粒子插件.这套教程是 RedG ...
axure中图表背影_Axure 教程：动态图表——排名图
之前的文章Axure教程:可视化视图和大家分享了怎样用中继器来制作图表.后来有粉丝问我可不可以用中继器做成动态的图表.所以现在作者就教大家怎么用axure来制作动态图表,今天先来制作排名图. 这个原型 ...
教程-利用壹伴插件一键采集图文
先注册壹伴壹伴链接下载壹伴插件开始采集某一篇图文推荐苏杰的一篇图文吧~~ 点击进去开始采集然后去对应的公众号就可以看到啦~~~~
苹果采集插件全套教程-苹果cmsV10采集插件
最近几年随着互联网时代的发展,做电影网站的站长越来越多了,加入此行列的人也是与日俱增!但是很多站长都是跟风来做电影站的,怎么做一点思路都没有.电影资源都不知道怎么来的.今天就教大家怎么做好电影站,文章 ...
python插件使用教程_Python常用扩展插件使用教程解析
扩展插件我下载的本版自带 pip下载工具 cmd-pip 下载插件 pip install HTMLParser 如果提示版本问题,更新PIP 别用开始里面的CMD 使用管理者权限请注意差别输入 ...
【Unity】虚拟现实 VRTK插件使用教程（一）插件基本配置
文章目录什么是VRTK 如何下载基本配置事件监听 HTC VIVE按键图例什么是VRTK VRTK全称是Virtual Reality Toolkit,前身是SteamVR Toolkit,由 ...

excel可视化图表插件_Axure 教程：利用图表前端插件实现高级可视化图表

具体实现方法

第一步

第二步

第三步

教程源文件

excel可视化图表插件_Axure 教程：利用图表前端插件实现高级可视化图表相关推荐

最新文章

热门文章