当前位置: 郭寨新闻>> 科技>> Axure 教程:利用图表前端插件实现高级可视化图表
Axure 教程:利用图表前端插件实现高级可视化图表
发布日期:2019-10-24 14:01:57

 

如何通过图标前端插件完成高级可视化图表?作者在这里给出了一个详细的教程来分享~ ~

一些视觉图表在背景开发中是不可避免的。制作它们有四种主要方法:excel表格截图、axure图形绘制、axure网页框架和axure第三方图表元素。

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

第四个“axure第三方图表组件”是由技术领导者开发的axhub图表组件。但是,图表中的组件数量有限,这适用于快速构建简单的图表,但不能满足我们更复杂的图表设计。

因此,仍然需要第三种方法来实现更高级的可视化图表。接下来,我将详细解释具体的方法(本教程以echarts为例):

echart是百度前端技术部开发的基于javascript的数据可视化图表库。它提供直观、生动、交互式和个性化的数据可视化图表。

从左侧[组件库中拉入内嵌框架]作为可视图表的载体。如下所示:

1.浏览器打开echart的视力表官方网站链接地址:https://www.echartsjs.com/examples/zh/index.html

2.选择符合您要求的可视图表,然后单击进入编辑和运行页面:本教程将通过这个复杂的可视案例进行解释。链接如下:https://www.echartsjs.com/examples/zh/editor.html? c =馅饼窝

数字如下:

点击右下角的[下载]下载图表的前端代码。文件是pie-nest.html。然后将此文件放在axure源文件之前的发布生成文件夹中,如下所示:

您可以在代码编辑器中修改所需的数据指示器和数据项。

3.双击[内嵌框架],选择以下选项[链接到网址或文件],并输入pie-nest.html链接。如下所示:

双击文件夹中的索引代码文件,查看刚刚链接的可视图表效果。如下所示:

只能打开生成文件夹中相应的页面html文件来查看图表。

如果您直接单击axure源文件右上角的“[预览”按钮,您将无法看到它。出现以下情况:

百度云教程源文件:https://pan.baidu.com/s/1rrbsnvcp-cstfnl7ig5ilw

提取代码:ei5r

作者:火星人~王牌,公开号码:王牌中的阿克塞尔峡谷

这篇文章最初是由“火星人”出版社出版的。每个人都是产品经理。未经允许禁止复制。

主题地图来自unsplash,基于cc0协议。

快三app

新闻热点
栏目热门

© Copyright 2018-2019 gohubli.com 郭寨新闻 Inc. All Rights Reserved.