Chart.js四个示例

最新推荐文章于 2025-03-07 11:26:42 发布

睿智的海鸥

最新推荐文章于 2025-03-07 11:26:42 发布

阅读量644

点赞数 9

本文链接：https://blog.csdn.net/w11111xxxl/article/details/140085297

版权

示例代码在图片后面，点赞加关注，谢谢

条形图

雷达图

折线图

圆环图

完整例子代码具体代码在干什么看粗体加重的注释

<!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>

<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>

// 雷达图数据
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>