洋所资讯

首页 科技 财经 国际 综合 文化 娱乐 体育 社会 时事 旅游 汽车 健康养生 军事 教育

洋所资讯 > 科技 > Axure 教程:利用图表前端插件实现高级可视化图表

Axure 教程:利用图表前端插件实现高级可视化图表

发布时间:2019-10-29 16:23:37 已有:4048人阅读

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

一些视觉图表在背景开发中是不可避免的。制作它们有四种主要方法: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协议。

江西快3

© Copyright 2018-2019 fzltjy.com 洋所资讯 Inc. All Rights Reserved.