一、引入Chart.js库
你需要在HTML文件中引入Chart.js库，你可以通过CDN链接来引入：
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
二、准备数据
假设我们有两组数据，一组是关于公司A的销售数据，另一组是关于公司B的销售数据，我们将为这两组数据创建两个不同的图表。
const companyAData = {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Company A Sales',
data: [150, 200, 250, 300, 350],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
};
const companyBData = {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Company B Sales',
data: [200, 250, 300, 350, 400],
backgroundColor: 'rgba(153, 102, 255, 0.2)',
borderColor: 'rgba(153, 102, 255, 1)',
borderWidth: 1
}]
};三、创建第一个图表
我们将使用canvas元素来呈现图表，在HTML中添加两个canvas元素，每个图表一个。
<canvas id="companyAChart"></canvas> <canvas id="companyBChart"></canvas>
使用JavaScript和Chart.js库来创建第一个图表。
const companyActx = document.getElementById('companyAChart').getContext('2d');
const companyAChart = new Chart(companyActx, {
type: 'bar',
data: companyAData,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});四、创建第二个图表
类似地，我们为第二个数据集创建另一个图表。
const companyBctx = document.getElementById('companyBChart').getContext('2d');
const companyBChart = new Chart(companyBctx, {
type: 'line',
data: companyBData,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});五、整合代码
将上述所有代码整合到一个HTML文件中，确保JavaScript代码在canvas元素之后执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Charts with Chart.js</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Multiple Charts with Chart.js</h1>
<canvas id="companyAChart"></canvas>
<canvas id="companyBChart"></canvas>
<script>
// JavaScript code here (data and chart creation)
</script>
</body>
</html>六、自定义和优化
你可以根据需要自定义图表的样式和行为，Chart.js提供了丰富的配置选项，如更改颜色、添加图例、设置动画等。
为第一个图表添加渐变背景色：
const companyAChart = new Chart(companyActx, {
type: 'bar',
data: companyAData,
options: {
scales: {
y: {
beginAtZero: true
}
},
animation: {
duration: 1000,
easing: 'easeInOutQuart'
}
}
});为第二个图表添加标题和工具提示：
const companyBChart = new Chart(companyBctx, {
type: 'line',
data: companyBData,
options: {
scales: {
y: {
beginAtZero: true
}
},
plugins: {
title: {
display: true,
text: 'Company B Sales Over Time'
},
tooltip: {
callbacks: {
label: function(tooltipItem) {
return 'Sales: ' + tooltipItem.raw;
}
}
}
}
}
});七、响应式设计
为了使图表在不同设备上都能良好显示，你可以使用CSS媒体查询来调整canvas的大小。
/* CSS */
#companyAChart, #companyBChart {
width: 100%;
max-width: 600px; /* Adjust as needed */
}八、常见问题解答（FAQs）
Q1: 如何在同一个页面上创建多个不同类型的图表？
A1: 你可以使用多个canvas元素，并为每个canvas创建一个不同的Chart实例，只需确保每个canvas具有唯一的ID，并在JavaScript中使用该ID来引用它，你可以为每个图表指定不同的类型（如条形图、折线图等）和数据集。
Q2: 如果数据集很大，Chart.js的性能如何？
A2: 对于大数据集，Chart.js的性能可能会受到影响，因为它需要在浏览器中渲染大量的点和线，为了提高性能，你可以考虑以下方法：减少数据点的数量（通过采样或聚合），使用更简单的图表类型（如条形图代替折线图），或者使用Web Workers来处理数据并更新图表，确保你的图表配置是优化的，例如关闭不必要的动画或减少交互功能。
以上就是关于“chart.js 多个图表”的问题，朋友们可以点击主页了解更多内容，希望可以够帮助大家!
