示例代码在图片后面，点赞加关注，谢谢
条形图
雷达图
折线图
圆环图
完整例子代码 具体代码在干什么看粗体加重的注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Examples</title>
<!-- 引入 Chart.js 的 CSS 和 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<!-- 条形图 -->
<canvas id="barChart"></canvas>
<!-- 雷达图 -->
<canvas id="radarChart"></canvas>
<!-- 折线图 -->
<canvas id="lineChart"></canvas>
<!-- 圆环图 -->
<canvas id="doughnutChart"></canvas>
<script>
// 条形图数据
const barChartData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Sales',
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
borderWidth: 1,
data: [65, 59, 80, 81, 56, 55, 40]
}]
};
// 雷达图数据
const radarChartData = {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgba(179,181,198,0.2)',
borderColor: 'rgba(179,181,198,1)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40]
}]
};
// 折线图数据
const lineChartData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1,
data: [65, 59, 80, 81, 56, 55, 40]
}]
};
// 圆环图数据
const doughnutChartData = {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
data: [300, 50, 100],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
};
// 创建条形图
const barChart = new Chart(document.getElementById('barChart'), {
type: 'bar',
data: barChartData,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
// 创建雷达图
const radarChart = new Chart(document.getElementById('radarChart'), {
type: 'radar',
data: radarChartData,
options: {}
});
// 创建折线图
const lineChart = new Chart(document.getElementById('lineChart'), {
type: 'line',
data: lineChartData,
options: {}
});
// 创建圆环图
const doughnutChart = new Chart(document.getElementById('doughnutChart'), {
type: 'doughnut',
data: doughnutChartData,
options: {}
});
</script>
</body>
</html>