使用 Chart.js 版本 3，如何在堆积条形图上左对齐 y 轴标签？答案

【问题标题】：Using Chart.js version 3, How to left justify the y-axis labels on a stacked bar chart?使用 Chart.js 版本 3，如何在堆积条形图上左对齐 y 轴标签？
【发布时间】：2021-12-12 00:36:19
【问题描述】：

我使用的是 Chart.js 版本 3。我需要在堆叠条形图的 y 轴上左对齐标签。如何做到这一点？

【问题讨论】：

标签： javascript chart.js chart.js3 chart.jsv3

【解决方案1】：

如documentation 中所述，这可以使用crossAlign 属性来完成：

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'pink'
    }]
  },
  options: {
    indexAxis: 'y',
    scales: {
      y: {
        ticks: {
          crossAlign: 'far'
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>

【讨论】：

哦，我想念那个，我的错....文档似乎缺少“理由”一词。一个在设计师、前端开发人员和人类中流行的词。 :)
嗯，它是开源的，所以尽管它的描述对于大多数人来说仍然很容易理解，但总是欢迎您对其进行调整。最好大家都能看懂，欢迎大家提出任何修改意见