导图社区 Chart.js
这是一篇关于Chart.js的思维导图,概述了Chart.js的使用方法,涵盖安装、基本使用以及多种图表类型。为使用Chart.js创建和配置各种类型的图表提供了清晰的指南。
编辑于2026-01-07 14:22:01这张危险物处理者乙种4类思维导图围绕乙种第4类危险物处理展开,内容丰富且条理清晰,以不同日目划分知识板块,为相关人员提供了全面的学习与操作指引。第1日目聚焦于危险物相关法令。涵盖危险物分类、指定数量倍数计算、储存场所设置变更等法规内容,还涉及危险物操作者制度,包括保安培训、操作者义务等,同时提及灾害预防相关命令,如预防规程等,为危险物处理奠定法规基础。第2日目继续深入危险物处理法令关联知识。介绍了室内外储存场所标准、给油取扱所类型、标识与揭示板要求等储存相关规范,以及危险物运输基准、消防设备、灾害发生时应急措施等内容,确保危险物从储存到运输各环节的安全合规。第3日目着重基础物理与化学知识。从物质状态变化、热的相关性质,如沸点、比重、热传导等,到物理变化与化学变化的区分,再到化学反应式、酸碱盐等化学基础,为理解危险物特性提供科学支撑。第4日目详细阐述危险物性质与消火方法。对第4类危险物中的特殊引火物、石油类等不同类型物质的性质进行说明,并针对各类危险物给出相应的消火策略,如适合的灭火器材和灭火要点。该导图逻辑严谨,从法规制度到科学原理,再到实际操作中的应对方法,形成了一个完整的知识体系。
这是一篇关于Chart.js的思维导图,概述了Chart.js的使用方法,涵盖安装、基本使用以及多种图表类型。为使用Chart.js创建和配置各种类型的图表提供了清晰的指南。
这是一篇关于rustdesk远程桌面的思维导图,详细且有条理地展示了使用Docker部署rustdesk远程桌面的全过程,适合需要搭建远程桌面服务的用户按照步骤进行操作。
社区模板帮助中心,点此进入>>
这张危险物处理者乙种4类思维导图围绕乙种第4类危险物处理展开,内容丰富且条理清晰,以不同日目划分知识板块,为相关人员提供了全面的学习与操作指引。第1日目聚焦于危险物相关法令。涵盖危险物分类、指定数量倍数计算、储存场所设置变更等法规内容,还涉及危险物操作者制度,包括保安培训、操作者义务等,同时提及灾害预防相关命令,如预防规程等,为危险物处理奠定法规基础。第2日目继续深入危险物处理法令关联知识。介绍了室内外储存场所标准、给油取扱所类型、标识与揭示板要求等储存相关规范,以及危险物运输基准、消防设备、灾害发生时应急措施等内容,确保危险物从储存到运输各环节的安全合规。第3日目着重基础物理与化学知识。从物质状态变化、热的相关性质,如沸点、比重、热传导等,到物理变化与化学变化的区分,再到化学反应式、酸碱盐等化学基础,为理解危险物特性提供科学支撑。第4日目详细阐述危险物性质与消火方法。对第4类危险物中的特殊引火物、石油类等不同类型物质的性质进行说明,并针对各类危险物给出相应的消火策略,如适合的灭火器材和灭火要点。该导图逻辑严谨,从法规制度到科学原理,再到实际操作中的应对方法,形成了一个完整的知识体系。
这是一篇关于Chart.js的思维导图,概述了Chart.js的使用方法,涵盖安装、基本使用以及多种图表类型。为使用Chart.js创建和配置各种类型的图表提供了清晰的指南。
这是一篇关于rustdesk远程桌面的思维导图,详细且有条理地展示了使用Docker部署rustdesk远程桌面的全过程,适合需要搭建远程桌面服务的用户按照步骤进行操作。
Chart.js
安装
CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js"></script>
使用
初始化 Chart 类,并传入图表节点
图表显示位置
<canvas id="myChart" width="400" height="200"></canvas>
初始化
const ctx = document.getElementById('myChart'); // 获取节点
配置对象结构
const config = { type: 'line' data: {} options: {} plugins: [] }
type -- 指定图表的类型
data -- 图表中展示的数据集
options -- 一些可选项配置不同类型图表有不同配置
plugins -- 插件
字体
全局字体
Chart.defaults.font.size = 16;
局部字体
options: { plugins: { legend: { labels: { font: { size: 50 } } } }
填充
四边
options: { layout: { padding: 20 } }
指定方向
options: { layout: { padding: { left: 50 } } }
动画
成圈张力
 const config = { type: 'line', data: data, options: { animations: { tension: { duration: 1000, easing: 'linear', from: 1, to: 0, loop: true } }, scales: { y: { min: 0, max: 100 } } } };
隐藏与显示动画
 const config = { type: 'line', data: data, options: { transitions: { show: { animations: { x: { from: 0 }, y: { from: 0 } } }, hide: { animations: { x: { to: 0 }, y: { to: 0 } } } } } };
柱形图

bar
垂直柱形图
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.js"></script> </head> <body> <canvas id="myChart" width="400" height="200"></canvas> <script> const ctx = document.getElementById('myChart'); const labels = ['一月份', '二月份', '三月份','四月份', '五月份', '六月份', '七月份']; // 设置 X 轴上对应的标签 const data = { labels: labels, datasets: [{ label: '我的第一个柱形图', data: [65, 59, 80, 81, 56, 55, 40], backgroundColor: [ // 设置每个柱形图的背景颜色 'rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)' ], borderColor: [ //设置每个柱形图边框线条颜色 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)' ], borderWidth: 1 // 设置线条宽度 }] }; const config = { type: 'bar', // 设置图表类型 data: data, // 设置数据集 options: { scales: { y: { beginAtZero: true // 设置 y 轴从 0 开始 } } }, }; const myChart = new Chart(ctx, config); </script> </body> </html>
水平柱形图
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.js"></script> </head> <body> <canvas id="myChart" width="400" height="200"></canvas> <script> const ctx = document.getElementById('myChart'); const labels = ['一月份', '二月份', '三月份','四月份', '五月份', '六月份', '七月份']; // 设置 X 轴上对应的标签 const data = { labels: labels, datasets: [{ axis: 'y', label: '我的第一个柱形图', data: [65, 59, 80, 81, 56, 55, 40], fill: false, backgroundColor: [ // 设置每个柱形图的背景颜色 'rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)' ], borderColor: [ //设置每个柱形图边框线条颜色 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)' ], borderWidth: 1 // 设置线条宽度 }] }; const config = { type: 'bar', // 设置图表类型 data: data, // 设置数据集 options: { indexAxis: 'y', } }; const myChart = new Chart(ctx, config); </script> </body> </html>
气泡图

bubble
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.js"></script> </head> <body> <canvas id="myChart" width="400" height="200"></canvas> <script> const ctx = document.getElementById('myChart'); const data = { datasets: [{ label: '气泡图实例', data: [{ x: 20, // X 轴 y: 30, // Y 轴 r: 15 // 气泡半径 }, { x: 30, y: 20, r: 20 }, { x: 40, y: 10, r: 10 }], backgroundColor: 'rgb(255, 99, 132)' }] }; const config = { type: 'bubble', // 设置图表类型 data: data, // 设置数据集 options: { }, }; const myChart = new Chart(ctx, config); </script> </body> </html>
环形图

doughnut
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.js"></script> </head> <body> <canvas id="myChart" width="400" height="400"></canvas> <script> const ctx = document.getElementById('myChart'); const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: '环形图实例', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] }; const config = { type: 'doughnut', data: data, options: { responsive: true, // 设置图表为响应式,根据屏幕窗口变化而变化 maintainAspectRatio: false,// 保持图表原有比例 scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }; const myChart = new Chart(ctx, config); </script> </body> </html>
饼图

pie
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.js"></script> </head> <body> <canvas id="myChart" width="400" height="400"></canvas> <script> const ctx = document.getElementById('myChart'); const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: '饼图实例', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] }; const config = { type: 'pie', data: data, options: { responsive: true, // 设置图表为响应式,根据屏幕窗口变化而变化 maintainAspectRatio: false,// 保持图表原有比例 scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }; const myChart = new Chart(ctx, config); </script> </body> </html>
折线图

line
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.js"></script> </head> <body> <canvas id="myChart" width="400" height="200"></canvas> <script> const ctx = document.getElementById('myChart'); const labels = ['一月份', '二月份', '三月份','四月份', '五月份', '六月份', '七月份']; // 设置 X 轴上对应的标签 const data = { labels: labels, datasets: [{ label: '我的第一个折线图', data: [65, 59, 80, 81, 56, 55, 40], fill: false, borderColor: 'rgb(75, 192, 192)', // 设置线的颜色 tension: 0.1 }] }; const config = { type: 'line', // 设置图表类型 data: data, }; const myChart = new Chart(ctx, config); </script> </body> </html>
混合图

scatter
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.js"></script> </head> <body> <canvas id="myChart" width="400" height="400"></canvas> <script> const ctx = document.getElementById('myChart'); const data = { labels: [ '一月份', '二月份', '三月份', '四月份' ], datasets: [{ type: 'bar', label: '柱形图数据集', data: [45, 49,52, 48], borderColor: 'rgb(255, 99, 132)', backgroundColor: 'rgba(255, 99, 132, 0.2)' }, { type: 'line', label: '折线图数据集', data: [50, 40, 45, 49], fill: false, borderColor: 'rgb(54, 162, 235)' }] }; const config = { type: 'scatter', data: data, options: { responsive: true, // 设置图表为响应式,根据屏幕窗口变化而变化 maintainAspectRatio: false,// 保持图表原有比例 scales: { y: { beginAtZero: true } } } }; const myChart = new Chart(ctx, config); </script> </body> </html>
极地图

polarArea
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.js"></script> </head> <body> <canvas id="myChart" width="400" height="400"></canvas> <script> const ctx = document.getElementById('myChart'); const data = { labels: [ 'Red', 'Green', 'Yellow', 'Grey', 'Blue' ], datasets: [{ label: '极地图实例', data: [11, 16, 7, 3, 14], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(75, 192, 192)', 'rgb(255, 205, 86)', 'rgb(201, 203, 207)', 'rgb(54, 162, 235)' ] }] }; const config = { type: 'polarArea', data: data, options: { responsive: true, // 设置图表为响应式,根据屏幕窗口变化而变化 maintainAspectRatio: false,// 保持图表原有比例 } }; const myChart = new Chart(ctx, config); </script> </body> </html>
雷达图

radar
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.js"></script> </head> <body> <canvas id="myChart" width="400" height="400"></canvas> <script> const ctx = document.getElementById('myChart'); const data = { labels: [ 'Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running' ], datasets: [{ label: '第一个数据集', data: [65, 59, 90, 81, 56, 55, 40], fill: true, backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgb(255, 99, 132)', pointBackgroundColor: 'rgb(255, 99, 132)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgb(255, 99, 132)' }, { label: '第二个数据集', data: [28, 48, 40, 19, 96, 27, 100], fill: true, backgroundColor: 'rgba(54, 162, 235, 0.2)', borderColor: 'rgb(54, 162, 235)', pointBackgroundColor: 'rgb(54, 162, 235)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgb(54, 162, 235)' }] }; const config = { type: 'radar', data: data, options: { responsive: true, // 设置图表为响应式,根据屏幕窗口变化而变化 maintainAspectRatio: false,// 保持图表原有比例 elements: { line: { borderWidth: 3 // 设置线条宽度 } } } }; const myChart = new Chart(ctx, config); </script> </body> </html>
主散点

scatter
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.js"></script> </head> <body> <canvas id="myChart" width="400" height="400"></canvas> <script> const ctx = document.getElementById('myChart'); const data = { datasets: [{ label: '散点图实例', data: [{ x: -10, y: 0 }, { x: 0, y: 10 }, { x: 10, y: 5 }, { x: 0.5, y: 5.5 }], backgroundColor: 'rgb(255, 99, 132)' }], }; const config = { type: 'scatter', data: data, options: { responsive: true, // 设置图表为响应式,根据屏幕窗口变化而变化 maintainAspectRatio: false,// 保持图表原有比例 scales: { x: { type: 'linear', position: 'bottom' } } } }; const myChart = new Chart(ctx, config); </script> </body> </html>