Axure原型组件库,数据可视化动态元件库(超详细Axure9可视化素材)

专门针对Axure制作的动态图表元件库,帮助产品经理更高效地制作高保真图表原型,是产品经理必备元件工具。现分享完整的组件库,大家一起学习。

每一个动态组件在原型文件中都配有详细介绍,文末可下载完整原型组件包~

1. 本组件库的图表模块,已包含所有常用的图表。

2. 设计原理

整体设计基于易用性考虑,每个元件均包含图表容器、样式配置、数据配置三个部分,并提供相应的默认值,能够直观了解图表效果,并根据自己需要进行任意拓展。

wrap底图 :每个元件都包含一个wrap,也是唯一可视的元素。调整改变wrap的长宽,会自动改变图表尺寸。

conf中继器:每个元件都包含一个conf,conf中可设置图表各类样式参数,当然每个图表都设置了默认值。

data中继器:每个元件都包含一个data,conf中可设置图表所需简单数据,如果大量数据可在conf设置数据文本或在线json地址。

01 折线图

基础折线图

基础折线图,支持单折线、多折线。

1. 页面放入该元件
将元件放入到页面位置,并确保当前页面包含了axChart_engine(离线引擎或在线引擎)。

2. 修改图表大小
拖入元件后,可拖到修改元件的大小,渲染的图形会自动适应。

3. 修改data中继器
图表所需数据在data中继器(切换到页面元素才可看到)中设置和修改。
第一列:为x坐标的值。
其它列:为对应的数据,有几列数据,就有几条折线。

4. 修改配置conf中继器
一般都有默认值,data表修改后,主要axis_x_name和axis_y_name修改,确保和data表对应上。

双纵轴折线图

动态轴折线图

迷你折线图

02 柱状图

基础柱状图

基础柱状图,支持单柱状、分组柱状图。

1. 页面放入该元件
将元件放入到页面位置,并确保当前页面包含了axChart_engine(在线引擎或离线引擎)。

2. 修改图表大小
拖入元件后,可拖到修改元件图片的大小,渲染的图形会自动适应。

3. 修改data中继器
图表所需数据在data中继器(切换到页面元素才可看到)中设置和修改。
第一列:为x坐标的值。
其它列:为对应的数据,有几列数据,就有几条折线。

4. 修改配置conf中继器
一般都有默认值,data表修改后,主要axis_x_name和axis_y#_name修改,确保和data表对应上。图表conf的设置优先级高于全局变量设置。

堆积柱状图

分组堆积柱状图

区间柱状图

瀑布图

动态柱状图

迷你柱状图

03 条形图

基础条形图

基础条形图,用长度表示非连续数据的大小。

1. 页面放入该元件
将元件放入到页面位置,并确保当前页面包含了axChart_engine(在线引擎或离线引擎)。

2. 修改图表大小
拖入元件后,可拖到修改元件图片的大小,渲染的图形会自动适应。

3. 修改data中继器
图表所需数据在data中继器(切换到页面元素才可看到)中设置和修改。
第一列:为x坐标的值。
其它列:为对应的数据,有几列数据,就有几条折线。

4. 修改配置conf中继器
一般都有默认值,data表修改后,主要axis_x_name和axis_y#_name修改,确保和data表对应上。图表conf的设置优先级高于全局变量设置。

堆积条形图

分组堆积条形图

区间条形图|甘特图

动态条形图

04 饼图

基础饼图

基础饼图,表示不同分类的占比情况。通过设置可实现环形图、限定角度的饼图。

1. 页面放入该元件
将元件放入到页面位置,并确保当前页面包含了axChart_engine(在线引擎或离线引擎)。

2. 修改图表大小
拖入元件后,可拖到修改元件图片的大小,渲染的图形会自动适应。

3. 修改data中继器
图表所需数据在data中继器(切换到页面元素才可看到)中设置和修改。
第一列:为x坐标的值。
其它列:为对应的数据,有几列数据,就有几条折线。

4. 修改配置conf中继器
一般都有默认值,data表修改后,主要axis_x_name和axis_y#_name修改,确保和data表对应上。图表conf的设置优先级高于全局变量设置。

玫瑰图

05 气泡/散点图

基础散点图

基础散点图,将数据以点的形式展现到坐标系上,表示变量之间的相互影响程度。

1. 页面放入该元件
将元件放入到页面位置,并确保当前页面包含了axChart_engine(在线引擎或离线引擎)。

2. 修改图表大小
拖入元件后,可拖到修改元件图片的大小,渲染的图形会自动适应。

3. 修改data中继器
图表所需数据在data中继器(切换到页面元素才可看到)中设置和修改。
第一列:为x坐标的值。
其它列:为对应的数据,有几列数据,就有几条折线。

4. 修改配置conf中继器
一般都有默认值,data表修改后,主要axis_x_name和axis_y#_name修改,确保和data表对应上。图表conf的设置优先级高于全局变量设置。

气泡图

06 面积图

基础面积图

基础面积图,用于强调数量随时间而变化的程度,也可用于引起人们对总值趋势的注意。最常用于表现趋势和关系,而不是传达特定的值。

1. 页面放入该元件
将元件放入到页面位置,并确保当前页面包含了axChart_engine(在线引擎或离线引擎)。

2. 修改图表大小
拖入元件后,可拖到修改元件图片的大小,渲染的图形会自动适应。

3. 修改data中继器
图表所需数据在data中继器(切换到页面元素才可看到)中设置和修改。
第一列:为x坐标的值。
其它列:为对应的数据,有几列数据,就有几条折线。

4. 修改配置conf中继器
一般都有默认值,data表修改后,主要axis_x_name和axis_y#_name修改,确保和data表对应上。图表conf的设置优先级高于全局变量设置。

堆积面积图

迷你面积图

07 漏斗图

基础漏斗图

基础漏斗图,用于单流程单向分析。

1. 页面放入该元件
将元件放入到页面位置,并确保当前页面包含了axChart_engine(在线引擎或离线引擎)。

2. 修改图表大小
拖入元件后,可拖到修改元件图片的大小,渲染的图形会自动适应。

3. 修改data中继器
图表所需数据在data中继器(切换到页面元素才可看到)中设置和修改。
第一列:为x坐标的值。
其它列:为对应的数据,有几列数据,就有几条折线。

4. 修改配置conf中继器
一般都有默认值,data表修改后,主要axis_x_name和axis_y#_name修改,确保和data表对应上。图表conf的设置优先级高于全局变量设置。

对比漏斗图

对称漏斗图

08 雷达图

基础雷达图

雷达图,是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法。

1. 页面放入该元件
将元件放入到页面位置,并确保当前页面包含了axChart_engine(在线引擎或离线引擎)。

2. 修改图表大小
拖入元件后,可拖到修改元件图片的大小,渲染的图形会自动适应。

3. 修改data中继器
图表所需数据在data中继器(切换到页面元素才可看到)中设置和修改。
第一列:为x坐标的值。
其它列:为对应的数据,有几列数据,就有几条折线。

4. 修改配置conf中继器
一般都有默认值,data表修改后,主要axis_x_name和axis_y#_name修改,确保和data表对应上。图表conf的设置优先级高于全局变量设置。

09 地图

基础在线地图

基础在线地图,用于展示某地地图。

1. 页面放入该元件
将元件放入到页面位置,并确保当前页面包含了axChart_engine(在线引擎或离线引擎)。

2. 修改图表大小
拖入元件后,可拖到修改元件图片的大小,渲染的图形会自动适应。

3. 修改data中继器
图表所需数据在data中继器(切换到页面元素才可看到)中设置和修改。
第一列:为x坐标的值。
其它列:为对应的数据,有几列数据,就有几条折线。

4. 修改配置conf中继器
一般都有默认值,由于才有高德地图作为底图,因此必须保证联网才可使用,同时默认支持地图3D显示效果,只需设置pitch就可呈现不同的地图可视角度。

世界地图

中国地图

10 箱型图

基础箱型图

基础箱型图,用作显示一组数据分布情况的统计图。

1. 页面放入该元件
将元件放入到页面位置,并确保当前页面包含了axChart_engine(在线引擎或离线引擎)。

2. 修改图表大小
拖入元件后,可拖到修改元件图片的大小,渲染的图形会自动适应。

3. 修改data中继器
图表所需数据在data中继器(切换到页面元素才可看到)中设置和修改。
第一列:为x坐标的值。
其它列:为对应的数据,有几列数据,就有几条折线。

4. 修改配置conf中继器
一般都有默认值,data表修改后,主要axis_x_name修改,确保和data表对应上。图表conf的设置优先级高于全局变量设置。

分组箱型图

11 K线图

基础K线图

基础K线图。

1. 页面放入该元件
将元件放入到页面位置,并确保当前页面包含了axChart_engine(在线引擎或离线引擎)。

2. 修改图表大小
拖入元件后,可拖到修改元件图片的大小,渲染的图形会自动适应。

3. 修改data中继器
图表所需数据在data中继器(切换到页面元素才可看到)中设置和修改。
第一列:为x坐标的值。
其它列:为对应的数据,有几列数据,就有几条折线。

4. 修改配置conf中继器
一般都有默认值,data表修改后,主要axis_x_name和axis_y#_name修改,确保和data表对应上。图表conf的设置优先级高于全局变量设置。

12 热力图

基础热力图

基础热力图,由小色块有序且紧凑的组成的图表,适合用于直接对数据量较大的、相对原始的数据进行分析。

1. 页面放入该元件
将元件放入到页面位置,并确保当前页面包含了axChart_engine(在线引擎或离线引擎)。

2. 修改图表大小
拖入元件后,可拖到修改元件图片的大小,渲染的图形会自动适应。

3. 修改data中继器
图表所需数据在data中继器(切换到页面元素才可看到)中设置和修改。
第一列:为x坐标的值。
其它列:为对应的数据,有几列数据,就有几条折线。

4. 修改配置conf中继器
一般都有默认值,data表修改后,主要axis_x_name和axis_y#_name修改,确保和data表对应上。图表conf的设置优先级高于全局变量设置。

日历热力图

分箱热力图

普通热力图

地理热力图

13 关系图

基础关系图

基础关系图,用于展现节点以及节点之间的关系数据。

1. 页面放入该元件
将元件放入到页面位置,并确保当前页面包含了axChart_engine(在线引擎或离线引擎)。

2. 修改图表大小
拖入元件后,可拖到修改元件图片的大小,渲染的图形会自动适应。

3. 修改data中继器
图表所需数据在data中继器(切换到页面元素才可看到)中设置和修改。
第一列:为x坐标的值。
其它列:为对应的数据,有几列数据,就有几条折线。

4. 修改配置conf中继器
一般都有默认值,data表修改后,主要axis_x_name和axis_y#_name修改,确保和data表对应上。图表conf的设置优先级高于全局变量设置。

力引导关系图

14 树图

基础树图

基础树图,主要用来可视化树形数据结构,是一种特殊的层次类型,具有唯一的根节点,左子树,和右子树。

1. 页面放入该元件
将元件放入到页面位置,并确保当前页面包含了axChart_engine(在线引擎或离线引擎)。

2. 修改图表大小
拖入元件后,可拖到修改元件图片的大小,渲染的图形会自动适应。

3. 修改data中继器
图表所需数据在data中继器(切换到页面元素才可看到)中设置和修改。
第一列:为x坐标的值。
其它列:为对应的数据,有几列数据,就有几条折线。

4. 修改配置conf中继器
一般都有默认值,data表修改后,主要axis_x_name和axis_y#_name修改,确保和data表对应上。图表conf的设置优先级高于全局变量设置。

基础矩形树图

15 旭日图

基础旭日图,由多层的环形图组成,在数据结构上,内圈是外圈的父节点。它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系。。

1. 页面放入该元件
将元件放入到页面位置,并确保当前页面包含了axChart_engine(在线引擎或离线引擎)。

2. 修改图表大小
拖入元件后,可拖到修改元件图片的大小,渲染的图形会自动适应。

3. 修改data中继器
图表所需数据在data中继器(切换到页面元素才可看到)中设置和修改。
第一列:为x坐标的值。
其它列:为对应的数据,有几列数据,就有几条折线。

4. 修改配置conf中继器
一般都有默认值,data表修改后,主要axis_x_name和axis_y#_name修改,确保和data表对应上。图表conf的设置优先级高于全局变量设置。

16 桑基图

基础桑基图,是一种特殊的流图(可以看作是有向无环图)。 它主要用来表示原材料、能量等如何从最初形式经过中间过程的加工或转化达到最终状态。

1. 页面放入该元件
将元件放入到页面位置,并确保当前页面包含了axChart_engine(在线引擎或离线引擎)。

2. 修改图表大小
拖入元件后,可拖到修改元件图片的大小,渲染的图形会自动适应。

3. 修改data中继器
图表所需数据在data中继器(切换到页面元素才可看到)中设置和修改。
第一列:为x坐标的值。
其它列:为对应的数据,有几列数据,就有几条折线。

4. 修改配置conf中继器
一般都有默认值,data表修改后,主要axis_x_name和axis_y#_name修改,确保和data表对应上。图表conf的设置优先级高于全局变量设置。

17 仪表盘

基础仪表图,也称为拨号图表或速度表图。其显示类似于拨号/速度计上的读数的数据,是一种拟物化的展示形式。

1. 页面放入该元件
将元件放入到页面位置,并确保当前页面包含了axChart_engine(在线引擎或离线引擎)。

2. 修改图表大小
拖入元件后,可拖到修改元件图片的大小,渲染的图形会自动适应。

3. 修改data中继器
图表所需数据在data中继器(切换到页面元素才可看到)中设置和修改。
第一列:为x坐标的值。
其它列:为对应的数据,有几列数据,就有几条折线。

4. 修改配置conf中继器
一般都有默认值,data表修改后,主要axis_x_name和axis_y#_name修改,确保和data表对应上。图表conf的设置优先级高于全局变量设置。

17 其他

动态数字

自增数字,用来增加数字表达的交互体验。
本元件不需要配置data和conf中继器,直接修改图形样式即可。

1. 页面放入该元件
将元件放入到页面位置。

2. 修改图表样式
可编辑数字文本;
可编辑字号、颜色、字体等一切文字编辑操作。
不支持小数,但是可以用2个数字+一点,组合成小数的样式。

动态进度条

标签云

水波图

圆环图

获取方法:

链接:https://pan.baidu.com/s/1kIovUMXYONk7r1O343MHOg?pwd=curn
提取码:curn

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/226960.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Appium获取toast方法封装

一、前置说明 toast消失的很快,并且通过uiautomatorviewer也不能获取到它的定位信息,如下图: 二、操作步骤 toast的class name值为android.widget.Toast,虽然toast消失的很快,但是它终究是在Dom结构中出现过&…

如何在Spring Boot中集成RabbitMQ

如何在Spring Boot中集成RabbitMQ 在现代微服务架构中,消息队列(如RabbitMQ)扮演了关键的角色,它不仅能够提供高效的消息传递机制,还能解耦服务间的通信。本文将介绍如何在Spring Boot项目中集成RabbitMQ,…

华为配置Smart Link负载分担示例

Smart Link基本概念 Smart Link通过两个端口相互配合工作来实现功能。这样的一对端口组成了一个Smart Link组。为了区别一个Smart Link组中的两个端口,我们将其中的一个叫做主端口,另一个叫做从端口。同时我们利用Flush报文、Smart Link实例和控制VLAN等…

Windows故障排除 – 连接WiFi却无法上网

Windows故障排除 – 连接WiFi却无法上网 Windows Troubleshooting - Connecting WiFi but PC Cannot Browse Internet By JacksonML 有个同学买了一台崭新的D品牌游戏本,i7处理器,英伟达RTX系列独立显卡及15寸液晶显示器,可谓功能强大。但是…

0011Java程序设计-ssm药店管理系统微信小程序

文章目录 摘 要目 录系统实现5.2服务端开发环境 编程技术交流、源码分享、模板分享、网课分享 企鹅🐧裙:776871563 摘 要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机…

设备状态监测好帮手:无线温振传感器的应用

在现代工业生产中,设备状态监测对于确保设备的正常运行和预防故障至关重要。而无线温振传感器的出现为设备状态监测带来了全新的解决方案。本文将介绍无线温振传感器的工作原理和优势,并探讨其在设备状态监测中的广泛应用。 无线温振传感器是一种能够实时…

电脑系统重装Win10专业版操作教程

用户想给自己的电脑重新安装上Win10专业版系统,但不知道具体的重装步骤。接下来小编将详细介绍Win10系统重新安装的步骤方法,帮助更多的用户完成Win10专业版的重装,重装后用户即可体验到Win10专业版系统带来的丰富功能。 准备工作 1. 一台正常…

论文阅读:LSeg: LANGUAGE-DRIVEN SEMANTIC SEGMENTATION

可以直接bryanyzhu的讲解:CLIP 改进工作串讲(上)【论文精读42】_哔哩哔哩_bilibili 这里是详细的翻译工作 原文链接 https://arxiv.org/pdf/2201.03546.pdf ICLR 2022 0、ABSTRACT 我们提出了一种新的语言驱动的语义图像分割模型LSeg。…

dockerfile简单实践部署(jenkins,wordpress)

实现部署jenkins的流程 配置java环境,导入jenkins包,运行命令 java -jar jenkins包,这里为了减少进入jenkins的web端安装插件,将插件提前部署到容器内。 制作dockerfile 创建镜像所在的文件夹和Dockerfile文件 mkdir /test cd …

【Flink系列六】Flink里面的状态一致性

状态一致性 有状态的流处理,内部每个算子任务都可以有自己的状态,对于流处理器内部来说,所谓的状态一致性,其实就是我们所说的计算结果要保证准确。一条数据不应该丢失,也不应该重复计算。再遇到有故障时可以恢复状态…

P30 C++智能指针

前言 🎬 个人主页:ChenPi 🐻推荐专栏1: 《C_ChenPi的博客-CSDN博客》✨✨✨ 🔥 推荐专栏2: 《Linux C应用编程(概念类)_ChenPi的博客-CSDN博客》✨✨✨ 🛸推荐专栏3: ​​​​​​《 链表_Chen…

在Spring Cloud使用Hystrix核心组件,并注册到Eureka注册中心去

其实吧,写Spring Cloud系列,我有时候觉得也挺难受的,因为Spring Cloud的微服务启动都需要一个一个来,并且在IDea中也需要占用比较大的内存,并且我本来可以一篇写完5大核心组件的,但是我却分了三篇&#xff…

QT 重定向qdebug输出到自绘界面

因为在嵌入式中调试qt需要查看输出信息,特意写了一个类用户便捷查看qdebug信息 界面如下: 提供了开始,停止,保存,清空,退出功能,具体代码下文给出 文件如下 #ifndef QDEBUGREDIRECT_H #define QDEBUGREDIRECT_H /**qdebug 重定向类 定向到界面控件*李吉磊 2023.12.7* */#in…

【dig命令查询方法】

dig(Domain Information Groper)是一个用于查询DNS(域名系统)的命令行工具,它可以帮助您获取关于域名的各种信息,如IP地址、MX记录、NS记录等。下面是dig的详细使用教程。 基本语法: dig [ser…

【数据库】树形数据组织架构下的封锁并发控制,B树索引并发访问控制,树协议原理及案例分析

数据库并发访问树协议 ​专栏内容: 手写数据库toadb 本专栏主要介绍如何从零开发,开发的步骤,以及开发过程中的涉及的原理,遇到的问题等,让大家能跟上并且可以一起开发,让每个需要的人成为参与者。 本专栏会…

docker基本管理和概念

1、定义:一个开源的应用容器引擎,基于go语言开发,运行在liunx系统中的开源的、轻量级的“虚拟机” docker的容器技术可以在一台主机上轻松的为任何应用创建一个轻量级的、可移植的、自给自足的容器 docker的宿主机是liunx系统,集…

深度学习与逻辑回归模型的融合--TensorFlow多元分类的高级应用

手写数字识别 文章目录 手写数字识别1、线性回归VS逻辑回归Sigmoid函数 2、逻辑回归的基本模型-神经网络模型3、多元分类基本模型4、TensorFlow实战解决手写数字识别问题准备数据集数据集划分 特征数据归一化归一化方法归一化场景 标签数据独热编码One-Hot编码构建模型损失函数…

NLP自然语言处理学习笔记

参考:NLP(自然语言处理)介绍 - 知乎 (zhihu.com) 一、NLP是什么 自然语言处理( Natural Language Processing, NLP)是计算机科学领域与人工智能领域中的一个重要方向。它研究能实现人与计算机之间用自然语言进行有效通信的各种理论和方法。自…

uni-app 微信小程序之好看的ui登录页面(一)

文章目录 1. 页面效果2. 页面样式代码 更多登录ui页面 uni-app 微信小程序之好看的ui登录页面(一) uni-app 微信小程序之好看的ui登录页面(二) uni-app 微信小程序之好看的ui登录页面(三) uni-app 微信小程…

原生微信小程序将字符串生成二维码图片

weapp-qrcode.js再最后 inde.ts中的内容 // pages/qrCode/index.ts // 引入weapp-qrcode.js文件 var QRCode require(../../utils/weapp-qrcode) Page({/*** 页面的初始数据*/data: {orderNo:"",imagePath:},/*** 生命周期函数--监听页面加载*/onLoad(options:any)…