使用char.js 柱形方式显示 一年12个月的最高气温与最低气温

<!DOCTYPE html>
<html>
<head>
  <title>气温图表</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    #myChart{
        width:800px;
        height: 400px;
    }
  </style>
</head>
<body>
  <canvas id="myChart"></canvas>
  <script>
    var tempData = {
      labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
      datasets: [
        {
          label: "最高气温",
          backgroundColor: "rgba(255,0,0,0.5)",
          borderColor: "red",
          borderWidth: 1,
          data: [20, 22, 25, 28, 30, 33, 35, 34, 32, 28, 24, 21]
        },
        {
          label: "最低气温",
          backgroundColor: "rgba(0,0,255,0.5)",
          borderColor: "blue",
          borderWidth: 1,
          data: [8, 8, 10, 15, 18, 22, 24, 24, 21, 16, 12, 9]
        }
      ]
    };

    var tempOptions = {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    };


    var ctx = document.getElementById("myChart").getContext("2d");
 
    var myChart = new Chart(ctx, {
      type: "bar",
      data: tempData,
      options: tempOptions
    });
  </script>
</body>
</html>

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

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

相关文章

【Linux】：信号在内核里的处理

【Linux】：信号在内核里的处理

信号的发送和保存 一.内核中的信号处理二.信号集操作函数1.一些信号函数2.sigprocmask3.sigpending4.写代码 三.信号在什么时候处理的四.再谈地址空间 一.内核中的信号处理 1.实际执行信号的处理动作称为信号递达(Delivery )2.信号从产生到递达之间的状态,称为信号未决(Pending…
阅读更多...
通义灵码，你的智能编码助手，免费公测啦！

通义灵码，你的智能编码助手，免费公测啦！

目录 ​编辑 1、介绍 2、安装 3、功能介绍 行/函数级实时续写 自然语言生成代码 单元测试生成 代码注释生成 代码解释 研发智能问答 多编程语言、多编辑器全方位支持 4、视频 &#x1f343;作者介绍&#xff1a;双非本科大三网络工程专业在读&#xff0c;阿里云专家…
阅读更多...
QT Day01 qt概述，创建项目，窗口属性，按钮，信号与槽

QT Day01 qt概述，创建项目，窗口属性，按钮，信号与槽

1.qt概述 1.什么是qt Qt 是一个跨平台的 C 图形用户界面应用程序框架。它为应用程序开发者提供建立艺 术级图形界面所需的所有功能。它是完全面向对象的&#xff0c;很容易扩展&#xff0c;并且允许真正的组 件编程。 2.支持的平台 Windows – XP 、 Vista 、 Win7 、 Win8…
阅读更多...
博捷芯打破半导体切割划片设备技术垄断，国产产业链实现高端突破

博捷芯打破半导体切割划片设备技术垄断，国产产业链实现高端突破

近日&#xff0c;国内半导体产业传来喜讯&#xff0c;博捷芯成功实现批量供货半导体切割划片设备&#xff0c;打破国外企业在该领域的长期技术垄断&#xff0c;为国产半导体产业链在高端切割划片设备领域实现重大突破。 自上世纪90年代以来&#xff0c;由于国外企业的技术封锁和…
阅读更多...
通俗易懂的spring Cloud；业务场景介绍 二、Spring Cloud核心组件：Eureka 、Feign、Ribbon、Hystrix、zuul

通俗易懂的spring Cloud；业务场景介绍 二、Spring Cloud核心组件：Eureka 、Feign、Ribbon、Hystrix、zuul

文章目录 通俗易懂的spring Cloud一、业务场景介绍二、Spring Cloud核心组件&#xff1a;Eureka三、Spring Cloud核心组件&#xff1a;Feign四、Spring Cloud核心组件&#xff1a;Ribbon五、Spring Cloud核心组件&#xff1a;Hystrix六、Spring Cloud核心组件&#xff1a;Zuul七…
阅读更多...
vivado产生报告阅读分析25-复杂性报告

vivado产生报告阅读分析25-复杂性报告

对于顶层设计和 / 或包含 1000 个以上叶节点单元的层级单元 &#xff0c; 复杂性报告会显示每个叶节点单元类型的“ Rent Exponent” &#xff08; Rent 指数 &#xff09; 、“ Average Fanout ” &#xff08; 平均扇出 &#xff09; 和分布。 Rent 指数是指在使用最小割 …
阅读更多...
Linux中tar命令的几个高级用法

Linux中tar命令的几个高级用法

在Linux世界中&#xff0c;Tar命令是一把解密归档世界的魔法工具。无论是打包、压缩还是解压&#xff0c;Tar命令都能胜任。本文将生动地介绍Tar命令的基本用法&#xff0c;并深入探讨五个常用选项&#xff0c;帮助读者在Linux系统中灵活运用这个强大的工具。 一、命令概述 Ta…
阅读更多...
西北大学计算机844考研-23年计网计算题详细解析

西北大学计算机844考研-23年计网计算题详细解析

西北大学计算机844考研-23年计网计算题详细解析 1.计算无传输差错状态下停止—等待ARQ协议效率,电磁波传播速率为2*10^8m/s&#xff0c;链路长为2000m&#xff0c;帧长度为1000比特&#xff0c;计算传输速率10kbps及10Mbps时的协议效率&#xff08;即信道利用率&#xff09; …
阅读更多...
[python]离线加载fetch_20newsgroups数据集

[python]离线加载fetch_20newsgroups数据集

首先手动下载这个数据包 http://qwone.com/~jason/20Newsgroups/20news-bydate.tar.gz 下载这个文件后和脚本放一起就行&#xff0c;然后 打开twenty_newsgroups.py文件&#xff08;在fetch_20newsgroups函数名上&#xff0c;右键转到定义即可找到&#xff09; 之后运行代码即…
阅读更多...
关于mybatis插入返回主键id和SpringBoot事务注解自调用演示

关于mybatis插入返回主键id和SpringBoot事务注解自调用演示

文章目录 一. 插入返回任意规则主键ID二. SpringBoot自调用事务2.1 场景12.2 场景2 自调用结论总结 一. 插入返回任意规则主键ID 实体对象 TableName("bank") Data public class Entity {TableId("id")Integer id;TableField("money")Integer …
阅读更多...
TUP通信

TUP通信

一&#xff0c;概括 二&#xff0c;常用方法 三&#xff0c; 实现步骤&#xff08;一发一收&#xff09; 四&#xff0c;案例&#xff08;一接一收&#xff09; &#xff08;1&#xff09;&#xff0c;客户端 &#xff08;2&#xff09;&#xff0c;服务端 &#xff08;3&…
阅读更多...
1.2 C语言之变量与算数运算表达式概述

1.2 C语言之变量与算数运算表达式概述

1.2 C语言之变量与算数运算表达式概述 一、华氏温度与摄氏温度对照二、代码概述三、练习 一、华氏温度与摄氏温度对照 #include <stdio.h>/*当华氏温度为 0,20,40,...300时&#xff0c;打印出华氏温度与摄氏温度对照表华氏温度与摄氏温度 C(5/9)(̧F-32) 其中C表示摄氏温…
阅读更多...
8.二维数组——将一个二维数组行和列的元素互换，存到另一个二维数组中。

8.二维数组——将一个二维数组行和列的元素互换，存到另一个二维数组中。

文章目录 前言一、题目描述 二、题目分析 三、解题 程序运行代码 前言 本系列为二维数组编程题&#xff0c;点滴成长&#xff0c;一起逆袭。 一、题目描述 将一个二维数组行和列的元素互换&#xff0c;存到另一个二维数组中。 二、题目分析 三、解题 程序运行代码 #incl…
阅读更多...
rdf-file：API

rdf-file：API

组件架构 intefaces模块&#xff1a;主要包含用户使用接口APItools模块&#xff1a;包含组件内核实现的文件操作工具codec模块&#xff1a;对文件结构&#xff0c;行数据&#xff0c;字段数据进行编码解码meta模块&#xff1a; 元数据配置以及加载loader/extension模块: 对配置…
阅读更多...
Linux uname命令教程：如何打印linux操作系统名称和硬件的基本信息（附实例教程和注意事项）

Linux uname命令教程：如何打印linux操作系统名称和硬件的基本信息（附实例教程和注意事项）

Linux uname命令介绍 uname命令是一个在Linux中常用的命令行工具&#xff0c;用于打印有关操作系统名称和系统硬件的基本信息。uname这个名字来源于"UNIX name"。它最常用于确定处理器架构&#xff0c;系统主机名和系统上运行的内核版本。 Linux uname命令适用的Li…
阅读更多...
Linux网络——数据链路层

Linux网络——数据链路层

目录 一.认识以太网 二.以太网帧格式 三.认识MAC地址 四.认识MTU 五.以太局域网的通信原理 六.其他重要协议 1.DNS协议 2.域名简介 3.ICMP协议 4.NAT技术 5.NAT技术的缺陷 6.NAT和代理服务器 一.认识以太网 "以太网" 不是一种具体的网络, 而是一种技术标…
阅读更多...
必应的下一个十年：穿越创新的奇点时刻

必应的下一个十年：穿越创新的奇点时刻

2023年是微软搜索引擎必应进入中国市场十周年&#xff0c;2024年也将迎来必应上市十五周年。对于风起云涌的互联网公司来说&#xff0c;十年到十五年是一个相当长的创新周期。而在2023年初&#xff0c;以GPT为代表的大语言模型横扫全球科技产业&#xff0c;也对互联网和云计算带…
阅读更多...
Docker | Docker部署MySQL

Docker | Docker部署MySQL

Docker | Docker部署MySQL ✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a;Docker系列…
阅读更多...
Excel如何比较两列数据的不同

Excel如何比较两列数据的不同

当遇到exel有两个列表的数据&#xff0c;需要比较得到他们的不同的部分&#xff0c;并且得到一个不同的值的列表。示例如下&#xff1a; 目的是&#xff1a;通过比较&#xff0c;知道Column2的哪些值不在在Column1里。 WPS直接提供了这一个功能&#xff0c;如下图&#xff1a;…
阅读更多...
Ubuntu18.04安装Ipopt-3.12.8流程

Ubuntu18.04安装Ipopt-3.12.8流程

本文主要介绍在Ubuntu18.04中安装Ipopt库的流程&#xff0c;及过程报错的解决方法&#xff0c;已经有很多关于Ipopt安装的博客&#xff0c;但经过我的测试&#xff0c;很多都失效了&#xff0c;经过探索&#xff0c;找到可流畅的安装Ipopt的方法&#xff0c;总结成本篇博客。 …
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站