【Axure高保真原型】下拉列表切换图表

今天和大家分享通过下拉列表动态切换统计图表的原型模板,我们可以通过下拉列表选择要显示的图表,包括柱状图、条形图、饼图、环形图、折线图、曲线图、面积图、阶梯图、雷达图;而且图表数据可以在左侧表格中动态维护,包括增加修改和删除,维护表格信息后对应图表也会动态更新;这个模板是用中继器结合echarts图表,所以使用也很方便,初始数据我们只要在中继器表格里填写即可,具体效果可以观看下方视频或者打开预览地址体验。

【原型效果】

【Axure高保真原型】下拉列表切换图表

1、通过下拉列表显示对应图表

图片

2、在表格中编辑图表数据

我们可以在左侧表格中编辑图表的数据,编辑后会自动生成对应图表,切换显示的图表也会自动生成

图片

3、删除表格数据

我们可以点击左侧表格中的删除按钮删除某行内容,删除后会自动生成对应图表,切换显示的图表也会自动生成

图片

4、添加表格数据

我们可以点击左侧表格中的在上方或下方增加新行的按钮,可以在对应位置添加新的空行,填写数据后会自动生成对应图表,切换显示的图表也会自动生成

图片

图片

【原型预览含下载地址】

https://axhub.im/ax9/9a27399d9b2d17a5/#g=1&p=下拉列表切换图表_js中继器

本文内容由微信公众号:Axure高保真原型 原创发布,未经许可,禁止转载和商用。

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

浅谈Redis 的 保护模式(protected-mode)

今天在一台服务器上面部署了redis,发现始终无法用工具远程连接,项目里面是正常的,就是工具不行,防火墙也关闭了.折腾了一会才突然想起来,是不是触发了保护模式. 什么时候触发保护模式protected-mode: 同时满足以下两个: 1.bind未指定ip 2.未配置密码 解决方案: 编辑redis…

码头船只出行和货柜管理系统的设计与实现

针对于码头船只货柜信息管理方面的不规范,容错率低,管理人员处理数据费工费时,采用新开发的码头船只货柜管理系统可以从根源上规范整个数据处理流程。 码头船只货柜管理系统能够实现货柜管理,路线管理,新闻管理&#…

数据结构之树(Topk问题, 链式二叉树)

一.topk问题 取N个数中最大(小)的前k个值,N远大于k 这道题可以用堆的方法来解决,首先取这N个数的前k个值,用它们建堆 时间复杂度O(k) 之后将剩余的N-k个数据依次与堆顶数据进行比较,如果比堆顶数据大,则将堆顶数据覆盖后向下调整 时间复杂度(N-k)*log(N) 总共的时间复杂度…

[SAP ABAP] 数值向上/向下取整

ceil()函数对数值进行向上取整,floor()函数对数值进行向下取整 输出结果:

48. 【Linux教程】yum 软件包管理

本小节介绍如何在 Linux 系统中使用 yum 命令软件管理。 1.yum 简介 yum 是 Red Hat 软件包管理器,它能够查询有关可用软件包的信息,从存储库获取软件包,安装和卸载软件包,以及将整个系统更新到最新的可用版本。yum 在更新&#…

力扣-[700. 二叉搜索树中的搜索]

递归法 确定递归函数的参数和返回值 递归函数的参数传入的就是根节点和要搜索的数值,返回的就是以这个搜索数值所在的节点。 代码如下: public TreeNode searchBST(TreeNode root, int val) 确定终止条件 如果root为空,返回null&#xff0c…

ChatGPT4 API-Key初探-本地调用API进行多轮对话方和流式输出

ChatGPT API 使用😎 既然要做大模型尽管可能国内无法使用GPT进行商用,除了性能地表最强之外,其优秀的Function calling(函数调用)在线微调还有各种,例如可以便捷处理知识向量库等功能,都是非常…

OpenHarmony开源项目—工程管理

DevEco Studio的基本使用,请参考DevEco Studio使用指南。本章主要介绍如何使用DevEco Studio进行多设备应用开发。 说明: 本章的内容基于DevEco Studio 3.1.1 Release版本进行介绍,如您使用DevEco Studio其它版本,可能存在文档与产…

Spring boot 集成netty实现websocket通信

一、netty介绍 Netty 是一个基于NIO的客户、服务器端的编程框架,使用Netty 可以确保你快速和简单的开发出一个网络应用,例如实现了某种协议的客户、服务端应用。Netty相当于简化和流线化了网络应用的编程开发过程,例如:基于TCP和U…

新手教程科普,手把手教你在bitget walelt用Uniswap

什么是 Uniswap (UNI)? Uniswap 是以太坊区块链上领先的去中心化交易所 (DEX),允许用户交换和交易各种加密货币。 Uniswap 于 2018 年 11 月推出,是以太坊最早的 DApp 之一。目前有四个版本;其中V1、V2、V3都有开源代码库。 与 C…

JS数组相关知识

获取数组的最大值/最小值&#xff1a; let arrary [2,5,4] let max arrary[0] for(let i 0;i<arrary.length;i){if(arrary[i]>max){max arrary[i]} }console.log(max);//查询数组最小值let arr [2,21,34,23,45] let min arr[0] for(let i 0;i<arr.length;i){if…

leetcode110.平衡二叉树

之前没有通过的样例 return语句只写了一个 return abs(l-r)<1缺少了 isBalanced(root->left)&&isBalanced(root->right);补上就好了 class Solution { public:bool isBalanced(TreeNode* root) {if(!root){return true;}int lgetHeight(root->left);i…