How to set ChartJS Y axis title?

在使用ChartJS时，要设置Y轴的标题，我们通常需要修改图表的配置选项中的scales属性。这里有一个具体的步骤说明和代码示例，可以帮助你理解如何为Y轴添加标题。

步骤 1: 引入ChartJS库

首先，确保你的项目中已经正确引入了ChartJS库。可以通过CDN或将库下载到本地来实现。

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

步骤 2: 创建画布(Canvas)

在HTML文件中，添加一个<canvas>元素，以便ChartJS可以在其中渲染图表。

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

步骤 3: 配置图表

在JavaScript中，我们需要创建图表的配置对象。重点是scales属性，特别是yAxes数组，其中我们可以设置scaleLabel属性来定义Y轴的标题。

javascript
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar', // 图表类型，这里用柱状图作为示例
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: '投票数量'
                }
            }]
        }
    }
});

步骤 4: 查看结果

在浏览器中打开包含上述代码的HTML文件，你应该可以看到一个包含Y轴标题“投票数量”的柱状图。

通过这种方式，你可以为ChartJS中的Y轴添加清晰的标题，这对于提高图表的可读性非常有帮助。