当前位置：首页 > news >正文

uniapp中用canvas绘制简单柱形图，小容量，不用插件——简单使用canvas

news 来源：原创 2025/8/25 3:23:47

uniapp中用canvas绘制简单柱形图，小容量，不用插件——简单使用canvas

在这里插入图片描述

完整代码

<template><view><!-- 学习数据 --><!-- 头部选项卡 --><view class="navTab"><view :class="listIndex==i?'activite':''" @click="gopage(i)" v-for="(item,i) in navList" :key="i">{{item}}</view></view><!-- 不同的图表 --><view id="mycan"><canvas style="height: 250px;" canvas-id="DataCanvas" class='canvasII'></canvas></view></view>
</template><script>export default {data() {return {title: '学习数据',canvasList: [{date:"9-12",num:0},{date:"9-13",num:24},{date:"9-14",num:100},{date:"9-15",num:45},{date:"9-16",num:15},{date:"9-17",num:54},{date:"9-18",num:10}],width:300,height:200,canPersent: [] ,//百分比数组listIndex:0,navList:["最近七天","最近七个月"],}},onLoad() {this.showChart()},methods: {gopage(i){this.listIndex = iif(i == 0){this.canvasList = [{date:"9-12",num:0},{date:"9-13",num:24},{date:"9-14",num:100},{date:"9-15",num:45},{date:"9-16",num:15},{date:"9-17",num:54},{date:"9-18",num:10}], //测试数据this.showChart()}else if( i == 1){this.canvasList = [{date:"3月",num:0},{date:"4月",num:234},{date:"5月",num:120},{date:"6月",num:145},{date:"7月",num:15},{date:"8月",num:543},{date:"9月",num:10}], //测试数据this.showChart()}},// 坐标图showChart() {const ctx = uni.createCanvasContext("DataCanvas")ctx.lineWidth = 1;// 横坐标ctx.beginPath(); //新建一条pathctx.setStrokeStyle('#c6c6c6')ctx.moveTo(20, this.height); //把画笔移动到指定的坐标ctx.lineTo(this.width, this.height); //绘制一条从当前位置到指定坐标(200, 50)的直线.ctx.closePath(); //闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做ctx.stroke(); //绘制路径。// 纵坐标ctx.beginPath();ctx.moveTo(20, 0);ctx.lineTo(20, this.height);ctx.closePath();ctx.stroke();var max = 0 //最大值// 找到最大的数for (var i = 0; i < this.canvasList.length; i++) {if(this.canvasList[i].num >= max){max = this.canvasList[i].num}}console.log("max---->",max);// 计算百分比: 以数组中最大的为100%，来计算其他的百分比for (var i = 0; i < this.canvasList.length; i++) {this.canPersent[i] = (this.canvasList[i].num / max) * (this.height-40) // -10 ,防止太高溢出头}console.log(this.canPersent);// 柱状图之间的间隔// 绘制7个粗线条 (300-20)/7 = 40，所以 i 每次要加上40  20为左右间隔var gap = (this.width - 10*2) / this.canPersent.lengthconsole.log("--gap----->",gap);for (var i = 0; i < this.canPersent.length; i++) {// 横坐标的数据ctx.fillText(this.canvasList[i].date, 30 + gap * i, 220);// 柱状图上的数据ctx.fillText(this.canvasList[i].num, 33 + gap * i, this.height - this.canPersent[i] - 15);if(this.canPersent[i] == 0){i++ctx.fillText(this.canvasList[i].date, 30 + gap * i, 220);ctx.fillText(this.canvasList[i].num, 33 + gap * i, this.height - this.canPersent[i] - 15);}ctx.beginPath();ctx.setStrokeStyle('#F36521') //设置柱状图颜色ctx.moveTo(40 + gap*i, this.height - this.canPersent[i] - 6);ctx.lineTo(40 + gap*i, this.height - 6);ctx.lineWidth = 10;ctx.lineCap = "round"; //设置线条样式ctx.stroke();}ctx.draw()},}}
</script><style>#mycan {margin: 20px;}.navTab{display: flex;justify-content: space-evenly;margin: 3px 0;}.activite{color: #fc722d;padding: 3px 0;border-bottom: 3px #fc722d solid;}
</style>

uniapp中用canvas绘制简单柱形图，小容量，不用插件——简单使用canvas

uniapp中用canvas绘制简单柱形图，小容量，不用插件——简单使用canvas 完整代码 <template><view><view class"navTab"><view :class"listIndexi?activite:"…...

编程日记 2025/8/25 3:23:47

SecureCRT 使用指南：安装、设置与高效操作

目录一、SecureCRT 简介 1.1 什么是 SecureCRT？ 1.2 核心功能亮点 1.3 软件特点二、SecureCRT 安装与激活 2.1 安装步骤（Windows 系统） 2.2 激活与破解（仅供学习参考） 三、基础配置与优化 3.1 界面与编码设…...

编程日记 2025/8/21 11:15:57

WebRTC 服务器之SRS服务器概述和环境搭建

1.概述 SRS（Simple Realtime Server）是一款高性能、跨平台的流媒体服务器，支持多种协议，包括 RTMP、WebRTC、HLS、HTTP-FLV、SRT、MPEG-DASH 和 GB28181。本文介绍了 SRS，包括其用途、关键功能、架构和支持协议。SRS 旨…...

编程日记 2025/8/25 3:20:37

第R8周：RNN实现阿尔兹海默病诊断（pytorch）

- **🍨 本文为[🔗365天深度学习训练营](https://mp.weixin.qq.com/s/rnFa-IeY93EpjVu0yzzjkw) 中的学习记录博客** - **🍖 原作者：[K同学啊](https://mtyjkh.blog.csdn.net/)** 一：前期准备工作 1.设置硬件设备 impo…...

编程日记 2025/8/21 20:07:45

vue+element 导航实现例子

项目使用的是 vue 3，安装配置可以查看栏目前面的文章。组件导航：https://element-plus.org/zh-CN/component/menu.html 面包屑：https://element-plus.org/zh-CN/component/breadcrumb.html 安装element库 PS D:\code\my-vue3-project&g…...

编程日记 2025/8/21 20:07:43

金仓数据库 KingbaseES 在电商平台数据库迁移与运维中深入复现剖析

金仓数据库 KingbaseES 在电商平台数据库迁移与运维中深入复现剖析前言在当今数字化商业蓬勃发展的时代，电商平台的数据量呈爆发式增长，对数据库性能、稳定性和扩展性提出了极高要求。本文章基于大型电商平台原本采用 MySQL 数据库，但随着业…...

编程日记 2025/8/21 11:13:59

Go小技巧易错点100例（三十）

本期分享： 1.切片共享底层数组 2.获取Go函数的注释切片共享底层数组在Go语言中，切片和数组是两种不同的元素，但是切片的底层是数组，并且还有一个比较重要的机制：切片共享底层数组。下面这段代码演示了切片&…...

编程日记 2025/8/21 20:07:39

LeetCode 热题 100 78. 子集

LeetCode 热题 100 | 78. 子集大家好，今天我们来解决一道经典的算法题——子集。这道题在 LeetCode 上被标记为中等难度，要求给定一个整数数组 nums，返回该数组所有可能的子集（幂集）。解集不能包含重复的子集&#x…...

编程日记 2025/8/25 1:43:56

苹果公司正在与亚马逊支持的初创公司Anthropic展开合作

每周跟踪AI热点新闻动向和震撼发展想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...

编程日记 2025/8/21 20:07:36

Python项目源码57：数据格式转换工具1.0（csv+json+excel+sqlite3）

1.智能路径处理：自动识别并修正文件扩展名，根据转换类型自动建议目标路径，实时路径格式验证，自动补全缺失的文件扩展名。 2.增强型预览功能：使用pandastable库实现表格预览，第三方模块自己安装一下&#x…...

编程日记 2025/8/24 2:31:33

Redis总结（六）redis持久化

本文将简单介绍redis持久化的两种方式 redis提供了两种不同级别的持久化方式： RDB持久化方式能够在指定的时间间隔能对你的数据进行快照存储.AOF持久化方式记录每次对服务器写的操作,当服务器重启的时候会重新执行这些命令来恢复原始的数据,AOF命令以redis协议追加保…...

编程日记 2025/8/24 16:03:02

【PostgreSQL数据分析实战：从数据清洗到可视化全流程】5.3 相关性分析（PEARSON/SPEARMAN相关系数）

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 5.3 相关性分析（PEARSON/SPEARMAN相关系数）5.3.1 相关性分析理论基础5.3.1.1 相关系数定义与分类5.3.1.2 Pearson相关系数（ Pearson Corr…...

编程日记 2025/8/21 20:07:31

目录 01 lars 系统架构回顾 02 lars-lbAgentV0.4-route_lb处理report业务流程 03 lars-lbAgentV0.4-负责均衡判断参数配置 04 lars-lbAgentV0.4-负载均衡idle节点的失败率判断 05 lars-lbAgentV0.4-负载均衡overload节点的成功率判断 06 lars-lbAgentV0.4-负载均衡上报提交…...

编程日记 2025/8/23 21:19:15

AIGC学术时代：DeepSeek如何助力实验与数值模拟

目录 1.实验和数值模拟工具 2.结合使用大家好这里是AIWritePaper官方账号，官网👉AIWritePaper~ 在工程和科学研究的世界里，实验与数值模拟是探索未知、验证理论和推动创新的两大支柱。它们如同一对翅膀，让思想得以飞翔&#xf…...

编程日记 2025/8/23 16:51:00

PHP数组排序深度解析：sort()、rsort()、asort()、arsort()、ksort()、krsort() 的适用场景与性能对比

在PHP开发中，数组排序是日常操作的核心技能之一。无论是处理用户数据、产品列表，还是分析日志信息，合理的排序方法能显著提升代码的效率和可维护性。PHP提供了多种数组排序函数（如 sort()、rsort()、asort() 等）&#…...

编程日记 2025/8/24 4:35:56

2025年企业Radius认证服务器市场深度调研：中小企业身份安全投入产出比最优解

引言：数字化转型浪潮下的身份安全新命题在混合办公成为常态、物联网设备呈指数级增长、网络攻击手段日益隐蔽的2025年，企业网络边界正在经历前所未有的重构。据IDC预测，全球企业网络安全投入中，身份与访问管理（IAM&a…...

编程日记 2025/8/21 20:07:24

开源模型应用落地-qwen模型小试-Qwen3-8B-快速体验-批量推理（三）

一、前言阿里云最新推出的 Qwen3-8B 大语言模型，作为国内首个集成“快思考”与“慢思考”能力的混合推理模型，凭借其 80 亿参数规模及 128K 超长上下文支持，正在重塑 AI 应用边界。该模型既可通过轻量化“快思考”实现低算力秒级响应，也能在复杂任务中激活深度推理模式，以…...

编程日记 2025/8/22 21:08:49

相同IP和端口的服务器ssh连接时出现异常

起因把服务器上的一个虚拟机搞坏了，所以删除重新创建了一个，端口号和IP与之前的虚拟机相同。 ssh usernameIP -p port 时报错 WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY! Someone…...

编程日记 2025/8/25 1:12:44

VScode中关于Copilot的骚操作

目录 1. Ctrl I 直接在工作区对话 2.Tab 党福音：写注释生成代码 3. 连续写几行函数头，Copilot 会自动“补全全函数” 4. 自动写单元测试 5. 在注释中要求它写某种风格 6. 代码重写器 7. 多语言切换无痛自动翻译 8. 在空文件中写注释&#xff0c…...

编程日记 2025/8/21 3:23:01

linux inotify 资源详解

Linux 的 inotify 是一个强大的文件系统监控机制，允许应用程序实时监听文件和目录的变化。这对于需要响应文件系统事件的应用（如配置热加载、备份工具、文件同步服务等）至关重要。以下是对 inotify 资源的深度解析： 一、核心概念…...

编程日记 2025/8/21 20:07:17

Java SE(8)——继承

1.继承的概念&作用在Java中，继承是面向对象编程的三大基本特性之一（还有封装和多态），允许一个类（子类/继承类）继承另一个类（父类/基类）的属性和方法继承的核心目的是&#xf…...

编程日记 2025/8/21 20:07:15

【论文笔记】SOTR: Segmenting Objects with Transformers

【题目】：SOTR: Segmenting Objects with Transformers 【引用格式】：Guo R, Niu D, Qu L, et al. Sotr: Segmenting objects with transformers[C]//Proceedings of the IEEE/CVF international conference on computer vision. 2021: 7157-7166. 【网…...

编程日记 2025/8/23 5:48:48

AIDC智算中心建设：资源池化核心技术解析

目录一、池化技术架构二、池化核心技术三、展望一、池化技术架构智能算力池化指依托云计算技术，整合 GPU/AI 芯片等异构算力资源，构建集中管理的资源池，并按上层智算业务的需求，对池化的资源进行统一调度、分配&#xff…...

编程日记 2025/8/24 5:26:57

flink监控指标

文章目录一、flink yaml配置二、配置指标项情况提示：以下是基于开源flink on k8s环境下配置监控指标(部分已实验，粗略记录) 一、flink yaml配置配置完成后就可以在页面查询(部分需要验证)指标二、配置指标项情况参考下面网址： 阿里…...

编程日记 2025/8/21 20:07:10

签名去背景图像处理实例

一、前言在生活中我们经常用到电子签名，但有时候我们所获取的图像的彩色图像，我们需要获取白底黑字的电子签名，我们可以通过下面程序对彩色图像进行处理达到我们的处理目的。原始彩色图像如下： 二、原始代码 clear all;close a…...

编程日记 2025/8/21 14:13:50

[人机交互]理解与概念化交互

零.本章重点（理解和分析用户问题） – 解释“问题空间”的概念和含义 – 解释如何概念化交互 – 描述什么是概念模型 – 讨论将界面隐喻作为概念模型的利弊 – 讨论界面具体化和抽象化各自的优缺点 – 概述概念设计和实际设计的关系一.理解问题空间简单…...

编程日记 2025/8/21 20:07:07

C与指针——常见库函数

字符串 #include<stdlibs.h> int abs(int); long labs(long); int rand(void);//0-RAND_MAX //字符串转值 int atoi(const char*); long atol(const char*); float atof(const char*);数学\排序 #include<math.h> \\常见三角，sqrt(); exp(); double p…...

编程日记 2025/8/21 20:07:05

【C++指南】STL list容器完全解读（一）：从入门到掌握基础操作

. 💓 博客主页：倔强的石头的CSDN主页 📝Gitee主页：倔强的石头的gitee主页 ⏩ 文章专栏：《C指南》期待您的关注文章目录一、初识list容器1.1 什么是list？1.2 核心特性1.3 典型应用场景二、核心成员函数…...

编程日记 2025/8/21 20:07:03

Auto.js 脚本：清理手机数据但保留账号

Auto.js 脚本：清理手机数据但保留账号以下是一个使用 Auto.js 实现的脚本，它可以帮你清理手机数据（类似恢复出厂设置），同时尽可能保留已登录的账号状态。请注意，这个脚本不能完全等同于真正的恢复出厂设置…...

编程日记 2025/8/20 23:19:20

Web Workers 技术详解与最佳实践

Web Workers 是 HTML5 提供的一个强大的多线程解决方案，它允许在后台线程中运行 JavaScript 代码，从而避免阻塞主线程。本文将深入探讨 Web Workers 的技术实现和实际应用。一、Web Workers 基础 1. 创建 Worker // 主线程代码 const worker new Wo…...

编程日记 2025/8/21 11:27:46

llama_factory0.9.3微调Qwen3

llama_factory微调QWen1.5-CSDN博客文章浏览阅读3.3k次，点赞36次，收藏10次。本文介绍了如何使用LLaMA-Factory微调Qwen1.5模型，包括1.8B和0.5B版本的训练细节。在数据、训练、LORA融合及...

编程日记 2025/8/21 20:07:01

Linux的时间同步服务器（附加详细实验案例）

一、计时方式的发展 1.古代计时方式公元前约 2000 年：古埃及人利用光线留下的影子计时，他们修建高耸的大型方尖碑，通过追踪方尖碑影子的移动判断时间，这是早期利用自然现象计时的典型方式。商朝时期：人们开发并…...

编程日记 2025/8/21 14:30:41

【全队项目】智能学术海报生成系统PosterGenius--前后端系统介绍

🌈 个人主页：十二月的猫-CSDN博客 🔥 系列专栏： 🏀大模型实战训练营_十二月的猫的博客-CSDN博客 💪🏻 十二月的寒冬阻挡不了春天的脚步，十二点的黑夜遮蔽不住黎明的曙光目录一. 前…...

编程日记 2025/8/23 2:30:32

COlT_CMDB_linux_tomcat_20250505.sh

#!/bin/bash #IT_BEGIN #IT_TYPE3 #IT MIDWARE_TOMCAT_DISCOVERY|discovery.tomcat[disc] #原型指标 #IT_RULE MIDWARE_TOMCAT_IP|ip[{#CATALINA_BASE}] #IT_RULE MIDWARE_TOMCAT_Startpid|Start_pid[{#CATALINA_BASE}] #IT_RULE MIDWARE_TOMCAT_hostname|hostname[{#CATALINA_…...

编程日记 2025/8/20 21:22:21

uniapp中用canvas绘制简单柱形图，小容量，不用插件——简单使用canvas

完整代码

相关文章：