📌  相关文章
📜  chartjs 堆积条形显示总数 - Javascript (1)

📅  最后修改于: 2023-12-03 15:29:57.857000             🧑  作者: Mango

使用 Chart.js 显示堆叠条形图总数

Chart.js 是一个流行的 JavaScript 库，用于创建各种类型的图表，包括堆叠条形图。在本文中，我们将介绍如何使用 Chart.js 创建堆叠条形图，并显示总数。

步骤1：创建 HTML 文件

首先，我们需要创建一个 HTML 文件，以便为我们的条形图提供工作空间和必要的库。 HTML 文件应包含以下内容：

<!DOCTYPE html>
<html>
<head>
	<title>Chart.js 堆叠条形图总数</title>
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
	<canvas id="myChart"></canvas>

	<script src="script.js"></script>
</body>
</html>

请注意，我们添加了 Chart.js 库的链接，并在 <canvas> 元素中添加了一个 id，以便稍后在脚本文件中使用。

步骤2：创建 JavaScript 文件

接下来，我们需要创建一个 JavaScript 文件，以便在 HTML 文件中包含它。在这个文件中，我们将定义堆叠条形图的数据，以及一些设置和样式。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
	type: 'bar',
	data: {
		labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
		datasets: [{
			label: '第一组数据',
			data: [12, 19, 3, 5, 2, 3, 10, 15, 8, 18, 7, 12],
			backgroundColor: 'rgba(255, 99, 132, 0.2)',
			borderColor: 'rgba(255, 99, 132, 1)',
			borderWidth: 1
		}, {
			label: '第二组数据',
			data: [3, 5, 2, 6, 8, 1, 9, 7, 4, 15, 9, 2],
			backgroundColor: 'rgba(54, 162, 235, 0.2)',
			borderColor: 'rgba(54, 162, 235, 1)',
			borderWidth: 1
		}, {
			label: '第三组数据',
			data: [1, 3, 4, 2, 7, 2, 10, 5, 8, 12, 6, 3],
			backgroundColor: 'rgba(255, 206, 86, 0.2)',
			borderColor: 'rgba(255, 206, 86, 1)',
			borderWidth: 1
		}]
	},
	options: {
		scales: {
			xAxes: [{
				stacked: true
			}],
			yAxes: [{
				stacked: true
			}]
		},
		tooltips: {
			callbacks: {
				label: function(tooltipItem, data) {
					var sum = 0;
					var label = data.datasets[tooltipItem.datasetIndex].label || '';

			        if (label) {
			            label += ': ';
			        }

					for (var i = 0; i < data.datasets.length; i++) {
						sum += data.datasets[i].data[tooltipItem.index];
					}

					label += sum;
					return label;
				}
			}
		}
	}
});

在这个脚本文件中，我们定义了 Chart 对象并指定了类型为 'bar' 的条形图。我们还定义了堆叠条形图的标签和数据集。每个数据集都具有标签、数据、背景颜色、边框颜色和边框宽度。在选项中，我们设置了 x 轴和 y 轴上的刻度，并定义了一个回调函数，以显示每个堆叠中的总数。

步骤3：运行代码

现在，我们已经创建了 HTML 和 JavaScript 文件，我们可以在本地计算机上运行它们或将它们上传到 Web 服务器。当我们运行 HTML 文件时，我们会得到一个堆叠条形图，如下所示：

堆叠条形图总数

当我们将鼠标悬停在每个条形元素上时，我们会看到一个工具提示，其中包含该堆叠中的总数。

# 使用 Chart.js 显示堆叠条形图总数

[Chart.js](https://www.chartjs.org/) 是一个流行的 JavaScript 库，用于创建各种类型的图表，包括堆叠条形图。在本文中，我们将介绍如何使用 Chart.js 创建堆叠条形图，并显示总数。

## 步骤1：创建 HTML 文件

首先，我们需要创建一个 HTML 文件，以便为我们的条形图提供工作空间和必要的库。 HTML 文件应包含以下内容：

```html
<!DOCTYPE html>
<html>
<head>
	<title>Chart.js 堆叠条形图总数</title>
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
	<canvas id="myChart"></canvas>

	<script src="script.js"></script>
</body>
</html>

请注意，我们添加了 Chart.js 库的链接，并在 <canvas> 元素中添加了一个 id，以便稍后在脚本文件中使用。

步骤2：创建 JavaScript 文件

接下来，我们需要创建一个 JavaScript 文件，以便在 HTML 文件中包含它。在这个文件中，我们将定义堆叠条形图的数据，以及一些设置和样式。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
	type: 'bar',
	data: {
		labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
		datasets: [{
			label: '第一组数据',
			data: [12, 19, 3, 5, 2, 3, 10, 15, 8, 18, 7, 12],
			backgroundColor: 'rgba(255, 99, 132, 0.2)',
			borderColor: 'rgba(255, 99, 132, 1)',
			borderWidth: 1
		}, {
			label: '第二组数据',
			data: [3, 5, 2, 6, 8, 1, 9, 7, 4, 15, 9, 2],
			backgroundColor: 'rgba(54, 162, 235, 0.2)',
			borderColor: 'rgba(54, 162, 235, 1)',
			borderWidth: 1
		}, {
			label: '第三组数据',
			data: [1, 3, 4, 2, 7, 2, 10, 5, 8, 12, 6, 3],
			backgroundColor: 'rgba(255, 206, 86, 0.2)',
			borderColor: 'rgba(255, 206, 86, 1)',
			borderWidth: 1
		}]
	},
	options: {
		scales: {
			xAxes: [{
				stacked: true
			}],
			yAxes: [{
				stacked: true
			}]
		},
		tooltips: {
			callbacks: {
				label: function(tooltipItem, data) {
					var sum = 0;
					var label = data.datasets[tooltipItem.datasetIndex].label || '';

			        if (label) {
			            label += ': ';
			        }

					for (var i = 0; i < data.datasets.length; i++) {
						sum += data.datasets[i].data[tooltipItem.index];
					}

					label += sum;
					return label;
				}
			}
		}
	}
});

在这个脚本文件中，我们定义了 Chart 对象并指定了类型为 'bar' 的条形图。我们还定义了堆叠条形图的标签和数据集。每个数据集都具有标签、数据、背景颜色、边框颜色和边框宽度。在选项中，我们设置了 x 轴和 y 轴上的刻度，并定义了一个回调函数，以显示每个堆叠中的总数。

步骤3：运行代码

现在，我们已经创建了 HTML 和 JavaScript 文件，我们可以在本地计算机上运行它们或将它们上传到 Web 服务器。当我们运行 HTML 文件时，我们会得到一个堆叠条形图，并在每个条形元素上看到一个工具提示，其中包含该堆叠中的总数。