Chart.js 旋转 x 轴文本标签

Question

我有这个简单的 Chart.js 图表：

var ctx_danceability = document.getElementById('chart_danceability').getContext('2d');

var chart_01 = new Chart(ctx_danceability, {
    type: 'line',
    data: {
        labels: [ "You", "Creep", "How Do You?", "Stop Whispering", "Thinking About You", "Anyone Can Play Guitar", "Ripcord", "Vegetable", "Prove Yourself", "I Can't", "Lurgee", "Blow Out" ],
        datasets: [{
            label: 'Danceability',
            borderColor: '#306090',
            fill: false,
            data: [ 0.222, 0.515, 0.185, 0.212, 0.365, 0.293, 0.255, 0.382, 0.25, 0.27, 0.42, 0.271 ],
            pointRadius: 5
        }]
    },
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    minRotation: 90
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <canvas id='chart_danceability'></canvas>
</div>

它工作正常，并成功显示图表。

但是，我遇到的问题是 x 轴标签在旋转 90 度时是右对齐的，因此每个轴标签的末端都会碰到 x 轴。

这很好 - 但对于较长的标签名称，标签名称的开头会被切断。

有没有办法对齐 x 轴标签，使它们旋转 180 度，但对齐以从 x 轴下方开始？

我试过这样做：

var ctx_danceability = document.getElementById('chart_danceability').getContext('2d');

var chart_01 = new Chart(ctx_danceability, {
    type: 'line',
    data: {
        labels: [ "You", "Creep", "How Do You?", "Stop Whispering", "Thinking About You", "Anyone Can Play Guitar", "Ripcord", "Vegetable", "Prove Yourself", "I Can't", "Lurgee", "Blow Out" ],
        datasets: [{
            label: 'Danceability',
            borderColor: '#306090',
            fill: false,
            data: [ 0.222, 0.515, 0.185, 0.212, 0.365, 0.293, 0.255, 0.382, 0.25, 0.27, 0.42, 0.271 ],
            pointRadius: 5
        }]
    },
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    minRotation: 270
                }
            }]
        }
    }
});

但是图表看起来像这样：

var ctx_danceability = document.getElementById('chart_danceability').getContext('2d');

var chart_01 = new Chart(ctx_danceability, {
    type: 'line',
    data: {
        labels: [ "You", "Creep", "How Do You?", "Stop Whispering", "Thinking About You", "Anyone Can Play Guitar", "Ripcord", "Vegetable", "Prove Yourself", "I Can't", "Lurgee", "Blow Out" ],
        datasets: [{
            label: 'Danceability',
            borderColor: '#306090',
            fill: false,
            data: [ 0.222, 0.515, 0.185, 0.212, 0.365, 0.293, 0.255, 0.382, 0.25, 0.27, 0.42, 0.271 ],
            pointRadius: 5
        }]
    },
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    minRotation: 270
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<canvas id='chart_danceability'></canvas>

我查看了Chart.js docs，但无法弄清楚。

Answer 1

我知道这并不完全是您问题的答案，而是一个可以解决您问题的替代方法的建议。

您可以将长标签转换为多行标签，只需将它们定义为字符串数组。

请查看您修改后的代码，看看它是如何工作的。

new Chart('chart_danceability', {
    type: 'line',
    data: {
        labels: [ "You", "Creep", "How Do You?", ["Stop", "Whispering"], ["Thinking", "About You"], ["Anyone Can", "Play Guitar"], "Ripcord", "Vegetable", "Prove Yourself", "I Can't", "Lurgee", "Blow Out" ],
        datasets: [{
            label: 'Danceability',
            borderColor: '#306090',
            fill: false,
            data: [ 0.222, 0.515, 0.185, 0.212, 0.365, 0.293, 0.255, 0.382, 0.25, 0.27, 0.42, 0.271 ],
            pointRadius: 5
        }]
    },
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    minRotation: 90
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>

<div class="container">
    <canvas id='chart_danceability'></canvas>
</div>