uniapp 使用canvas制作柱状图

效果图:

在这里插入图片描述

实现思路:
1、通过展示数据计算需要画几根柱子;
2、通过组件宽度、高度计算出每根柱子的宽度及高度;
3、for循环依次绘制每根柱子;
4、绘制柱子时,先绘制顶部百分比、value值,再绘制柱子,再绘制底部标题;
5、文字需要居中,可绘制前丈量文字宽度再确定起始坐标。

<template><view class="container"><canvas canvas-id="columnarCanvas" id="columnarCanvas" style="width:750rpx; height:500rpx; margin-top:20px;" ></canvas><canvas canvas-id="testCanvas" style="width:750rpx; height:400rpx; background-color: #f8f8f8;"></canvas></view>
</template><script>export default {data() {return {canvasInfo: { },dataList: [{title: "玛莎拉蒂",value: 2}, {title: "奥迪",value: 8}, {title: "奔驰",value: 9}, {					title: "奔奔",value: 6}, {title: "保时捷",value: 4}, {title: "宝马",value: 7}, {title: "凯迪拉克",value: 3}]}},onReady() {this.getCanvasInfo()this.drawTest()},methods: {/** 获取节点信息,动态得到组件的宽度,高度 **/getCanvasInfo() {var view = uni.createSelectorQuery().in(this).select("#columnarCanvas"); view.fields({ size: true, rect: true }, res => {// console.log("得到节点信息" + JSON.stringify(res))var canvasInfo = {}canvasInfo.width = res.widthcanvasInfo.height = res.heightthis.canvasInfo = canvasInfo// 调用方法画图this.drawColumnar()}).exec();},/** 画图 **/drawColumnar() {const ctxColumnar = uni.createCanvasContext("columnarCanvas")var dataList = this.dataListvar canvasInfo = this.canvasInfovar columnarNum = dataList.lengthvar columnarWidth = (canvasInfo.width - 30) / (2 * columnarNum + 1)// console.log("宽度", columnarWidth)var maxColumnarHeight = canvasInfo.height - 60 - 20var maxColumnarValue = 0var totalValue = 0for (var i = 0; i < dataList.length; i++) {if (dataList[i].value > maxColumnarValue) {maxColumnarValue = dataList[i].value}totalValue = totalValue + dataList[i].value}for (var i = 0; i < dataList.length; i++) {ctxColumnar.setFontSize(15)var percent = parseInt(dataList[i].value * 100 / totalValue) + "%"var dx = columnarWidth * (2 * i + 1)var dy = canvasInfo.height - (maxColumnarHeight * (dataList[i].value / maxColumnarValue) + 60) + 10ctxColumnar.setFillStyle('#2b2b2b')var percentWidth = ctxColumnar.measureText(percent)ctxColumnar.fillText(percent, dx + columnarWidth / 2 - percentWidth.width / 2, dy)// ctxColumnar.setFillStyle('rgb(99, 112, 210)')ctxColumnar.setFillStyle(this.randomColor(i)) //指定每条柱子不同颜色var valueWidth = ctxColumnar.measureText(dataList[i].value + "")ctxColumnar.fillText(dataList[i].value + "", dx + columnarWidth / 2 - valueWidth.width / 2, dy + 20)ctxColumnar.fillRect(dx, dy + 22, columnarWidth, maxColumnarHeight * (dataList[i].value / maxColumnarValue))ctxColumnar.setFillStyle('#8a8a8a')var titleWidth = ctxColumnar.measureText(dataList[i].title + "")ctxColumnar.fillText(dataList[i].title, dx + columnarWidth / 2 - titleWidth.width / 2, canvasInfo.height - 10)}ctxColumnar.draw()},/**随机指定颜色**/randomColor(index) {let colorList = ["#63b2ee","#76da91","#f8cb7f","#7cd6cf","#f89588","#9192ab","#efa666","#7898e1","#eddd86","#9987ce","#76da91","#63b2ee"]// let index = Math.floor(Math.random() * colorList.length)return colorList[index]},/**画图测试**/drawTest() {const ctx = uni.createCanvasContext('testCanvas')let dataList = this.dataListlet x = 20, y = 0, w = 40, h = 20for (var i = 0; i < dataList.length; i++) {// 矩形ctx.fillStyle = this.randomColor(i)ctx.fillRect(x, y, w, h) // x,y,w,h// 设置字体样式ctx.font = 'bold 10px Arial'// 设置文本颜色ctx.fillStyle = this.randomColor(i)// 文本ctx.fillText(dataList[i].title, x+w+10, y+15)// 每行偏离距离y = y + 25}// 线条ctx.beginPath()ctx.moveTo(1, 1) //起点坐标ctx.lineTo(400, 1) //终点坐标ctx.stroke()// 进行绘制ctx.draw()}}}
</script><style></style>

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

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

相关文章

掌握Spring缓存-全面指南与最佳实践

第1章&#xff1a;引言 大家好&#xff0c;我是小黑&#xff0c;咱们今天来聊聊缓存&#xff0c;在Java和Spring里&#xff0c;缓存可是个大角色。咱们在网上购物&#xff0c;每次查看商品详情时&#xff0c;如果服务器都要去数据库里翻箱倒柜&#xff0c;那速度得慢成什么样&…

Spring Boot “How-to” 指南中文文档-下

本文为官方文档直译版本。原文链接 篇幅较长&#xff0c;遂分两篇 Spring Boot “How-to” 指南中文文档-下 Jersey利用 Spring Security 保护 Jersey 端点的安全与其他网络框架一起使用Jersey HTTP Clients配置 RestTemplate 以使用代理配置基于 Reactor Netty 的 WebClient 使…

自制一款多版本Windows平台的点Net3.5离线安装神器,彻底解决一切烦恼!

网管小贾 / sysadm.cc 公司来了位刚毕业的实习生小蔡&#xff0c;老板让我带带他。 我想着这小伙子干活挺积极主动&#xff0c;平时没事也可以给我搭把手。 可意想不到的是&#xff0c;正是由于我一时心软放松警惕&#xff0c;渐渐被拖进了坑。 话说某天临下班前&#xff0c;…

开发安全之:Database access control

Overview 如果没有适当的 access control&#xff0c;就会执行一个包含用户控制主键的 SQL 指令&#xff0c;从而允许攻击者访问未经授权的记录。 Details Database access control 错误在以下情况下发生&#xff1a; 1. 数据从一个不可信赖的数据源进入程序。 2. 这个数据用…

Linux下防火墙相关命令整理

目录 一.前言二.相关命令整理 一.前言 这篇文章简单整理一下Linux系统中防火墙相关命令。 二.相关命令整理 开启防火墙 systemctl start firewalld关闭防火墙 systemctl stop firewalld重启防火墙 systemctl restart firewalld开机启用防火墙 systemctl enable firewall…

CTF CRYPTO 密码学-4

题目名称&#xff1a;奇怪的先生 题目描述&#xff1a; 描述:oss先生将三个培根的中间一只移到了左边,然后咬了一小口最后一根&#xff0c;说真好吃&#xff0c;真是个奇怪的先生&#xff01; 密文&#xff1a;VlM5WnlXc0ZibEhmMmE1ZHYxMDlhVkdmMlk5WmtRPT0 分析 应该是根据题…

FFmpeg连载6-音频重采样

今天我们的实战内容是将音频解码成PCM&#xff0c;并将PCM重采样成特定的采样率&#xff0c;然后输出到本地文件进行播放。 什么是重采样&#xff1f; 所谓重采样&#xff0c;一句话总结就是改变音频的三元素&#xff0c;也就是通过重采样改变音频的采样率、采样格式或者声道数…

C# 生成指定长度的随机字符串

/// <summary> /// 生成指定长度的随机字符串 /// </summary> /// <param name"intLength">随机字符串长度</param> /// <param name"booNumber">生成的字符串中是否包含数字</param>…

力扣刷MySQL-第一弹(详细解析)

&#x1f389;欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克&#x1f379; ✨博客主页&#xff1a;小小恶斯法克的博客 &#x1f388;该系列文章专栏&#xff1a;力扣刷题讲解-MySQL &#x1f379;文章作者技术和水平很有限&#xff0c;如果文中出…

uniCloud ---- uni-captch实现图形验证码

目录 用途说明 组成部分 目录结构 原理时序 云端一体组件介绍 验证码配置&#xff08;可选&#xff09;&#xff1a; 普通验证码组件 公共模块 云函数公用模块 项目实战 创建云函数 创建注册页 创建云函数 关联公用模块 uni-captcha 刷新验证码 自定义实现 验…

基于FPGAWS2812B的贪吃蛇方案设计(含源码)

第1章 基于FPGA&WS2812B的贪吃蛇方案设计 1.2 贪吃蛇游戏系统的功能需求分析 为了更好的实现我们的贪吃蛇游戏系统&#xff0c;我们需要对项目进行功能分析&#xff0c;利于我们对整个系统的分析、架构。 首先&#xff0c;对于整个游戏系统&#xff0c;我们需要界面来引…

用LED数码显示器伪静态显示数字1234

#include<reg51.h> // 包含51单片机寄存器定义的头文件 void delay(void) //延时函数&#xff0c;延时约0.6毫秒 { unsigned char i; for(i0;i<200;i) ; } void main(void) { while(1) //无限循环 { P20xfe; …

基于HFSS的微带线特性阻抗仿真-与基于FDTD的计算电磁学方法对比(Matlab)

基于HFSS的微带线特性阻抗仿真-与基于FDTD的计算电磁学方法对比&#xff08;Matlab&#xff09; 工程下载&#xff1a; HFSS的微带线特性阻抗仿真工程文件&#xff08;注意版本&#xff1a;HFSS2023R2&#xff09;&#xff1a; https://download.csdn.net/download/weixin_445…

stm32之SD(TF)卡、SDIO、FATFS的使用学习(笔记二)[接学习笔记一]

SD卡数据的写入或者读取&#xff0c;需要将数据写入SDIO的FIFO寄存器&#xff0c;然后通过FIFO寄存器进行数据的发送。FIFO寄存器是32位的寄存器&#xff0c;操作 SDIO_FIFO&#xff08;不论读出还是写入&#xff09;必须是以 4 字节对齐的内存进行操作&#xff0c;否则将导致出…

入门级的 DataV 教程,适用于 Vue 2

入门级的 DataV 教程&#xff0c;适用于 Vue 2。这个教程将指导您创建一个名为 datav-project 的 Vue 项目&#xff0c;并展示如何在其中使用 DataV。我们将从安装 Vue CLI 开始&#xff0c;然后创建项目&#xff0c;接着添加 DataV&#xff0c;并最后显示一个简单的数据可视化…

C++ 之LeetCode刷题记录(八)

&#x1f604;&#x1f60a;&#x1f606;&#x1f603;&#x1f604;&#x1f60a;&#x1f606;&#x1f603; 开始cpp刷题之旅&#xff0c;多学多练&#xff0c;尽力而为。 先易后难&#xff0c;先刷简单的。 35. 搜索插入位置 给定一个排序数组和一个目标值&#xff0c;…

ubuntu 22.04 安装 device-tree-compiler (dtc)

网络上使用apt 安装都没用&#xff0c;提升各种以来。最后网络在ubuntu 官网找到了安装包&#xff0c;测试ok&#xff0c;分别是libfdt1_1.4.7-1_amd64.deb libfdt-dev_1.4.7-1_amd64.deb device-tree-compiler_1.4.7-1_amd64.deb 安装顺序也是按照这个顺序来&#xff1a;sudo…

x-cmd pkg | public-ip-cli - 公共 IP 地址查询工具

简介 public-ip-cli 是一个用 Javascript 编写的命令行工具&#xff0c;用于获取当前计算机或网络所使用的公共 IP 地址。 它可以让用户在命令行界面上查询 OpenDNS、Google DNS 和 HTTPS 服务的 DNS 记录以获取与互联网通信时所分配的公共 IP 地址。 首次用户 使用 x env us…

数据结构04附录01:字符串大写转小写[C++]

图源&#xff1a;文心一言 上机题目练习整理~&#x1f95d;&#x1f95d; 本篇作为字符串的代码补充&#xff0c;提供了3种&#xff08;差别并不大&#xff09;解法以及函数的详细解释&#xff0c;供小伙伴们参考~&#x1f95d;&#x1f95d; 前文&#xff1a;&#x1f338;…

Flink学习

批处理和流处理的区别 批处理和流处理是数据处理的两种主要方式&#xff0c;它们在处理时间、数据量和处理方式上有一些不同。 处理时间&#xff1a; 批处理是在一段时间内收集的数据&#xff0c;然后进行处理&#xff0c;一般情况下&#xff0c;这些数据是静态的&#xff0c…