使用ChartJS叠加horizontalBar图形

ChartJS是一款流行的JavaScript图表库，用于创建各种类型的交互式图表。它支持多种图表类型，包括柱状图、折线图、饼图等。在这个问答中，我们将重点讨论如何使用ChartJS创建叠加的水平柱状图（horizontalBar）。

水平柱状图是一种用于比较不同类别数据的图表类型。它的优势在于能够清晰地显示各个类别之间的差异，并且适用于大量数据的可视化。

使用ChartJS创建叠加的水平柱状图的步骤如下：

引入ChartJS库：首先，在HTML文件中引入ChartJS库。可以通过以下CDN链接引入：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

创建一个Canvas元素：在HTML文件中创建一个Canvas元素，用于显示图表。可以通过以下代码创建一个Canvas元素：

<canvas id="myChart"></canvas>

编写JavaScript代码：在JavaScript文件中编写代码来配置和绘制水平柱状图。以下是一个示例代码：

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ['类别1', '类别2', '类别3'],
        datasets: [{
            label: '数据集1',
            data: [10, 20, 30],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
        }, {
            label: '数据集2',
            data: [15, 25, 35],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            x: {
                beginAtZero: true
            },
            y: {
                beginAtZero: true
            }
        }
    }
});

在上面的代码中，我们创建了一个水平柱状图，其中包含两个数据集（数据集1和数据集2），每个数据集都有三个类别（类别1、类别2和类别3）。每个数据集都有自己的颜色和标签。