从数组创建堆叠的chart.js图

，可以通过以下步骤实现：

首先，确保已经引入了chart.js库。可以通过在HTML文件中添加以下代码来引入chart.js库：<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
创建一个canvas元素，用于显示图表。在HTML文件中添加以下代码：<canvas id="stackedChart"></canvas>
在JavaScript文件中，使用以下代码获取canvas元素的引用，并创建一个图表对象：var ctx = document.getElementById('stackedChart').getContext('2d'); var stackedChart = new Chart(ctx, { type: 'bar', data: { labels: ['标签1', '标签2', '标签3'], // 图表的标签 datasets: [ { label: '数据集1', data: [10, 20, 30], // 数据集1的值 backgroundColor: 'rgba(255, 99, 132, 0.5)', // 数据集1的背景颜色 borderColor: 'rgba(255, 99, 132, 1)', // 数据集1的边框颜色 borderWidth: 1 // 数据集1的边框宽度 }, { label: '数据集2', data: [15, 25, 35], // 数据集2的值 backgroundColor: 'rgba(54, 162, 235, 0.5)', // 数据集2的背景颜色 borderColor: 'rgba(54, 162, 235, 1)', // 数据集2的边框颜色 borderWidth: 1 // 数据集2的边框宽度 } ] }, options: { scales: { x: { stacked: true // x轴堆叠 }, y: { stacked: true // y轴堆叠 } } } });

在上述代码中，我们创建了一个堆叠柱状图（type: 'bar'），并定义了两个数据集（datasets）。每个数据集包含了一组值（data）、背景颜色（backgroundColor）、边框颜色（borderColor）和边框宽度（borderWidth）。图表的标签（labels）用于显示在x轴上。