Chart.js横向柱状图标签全显及柱粗调整适配问题

问题1：y轴标签autoSkip: false不生效的解决方案 #

失效原因是你使用的是Chart.js v3及以上版本，配置中的scales.yAxes是v2版本的语法，v3已经将轴配置改为直接通过轴名（y/x）声明，不需要Axes后缀也不需要包裹数组，因此之前的配置没有被框架识别生效。

修正后的轴配置写法如下：

scales: {
  y: {
    ticks: {
      autoSkip: false,
      maxTicksLimit: labels.length, // 强制匹配标签总数，确保所有标签都展示
      // 若标签文字过长可额外添加回调控制换行，按需要调整拆分字符数
      callback: function(value) {
        return value.match(/.{1,10}/g)
      }
    }
  }
}

问题2：调整条形粗细后图表高度不扩容适配的解决方案 #

需要先关闭Chart.js默认的宽高比强制约束，再配合容器高度控制实现适配：

1. 在options中添加maintainAspectRatio: false参数，关闭宽高比锁定，允许图表自适应容器高度
2. 若标签数量固定，直接给canvas的外层父容器设置固定高度即可；若标签数量动态变化，可以根据标签数量动态计算容器高度，实现自动适配，示例逻辑如下：

// 初始化图表前计算高度，每个条形预留50px高度，可根据需要自行调整数值，100为上下边距预留值
const chartHeight = labels.length * 50 + 100
manufacturersPieChartCanvas.parentNode.style.height = `${chartHeight}px`

完整修正后的配置代码 #

import Chart from 'chart.js/auto';

document.addEventListener("turbo:load", function(e) {
  let manufacturersPieChartCanvas = document.getElementById('manufacturers-pie-chart');

  if (manufacturersPieChartCanvas) {
    let labels = JSON.parse(manufacturersPieChartCanvas.dataset.manufacturers_chart_labels);
    let data = JSON.parse(manufacturersPieChartCanvas.dataset.manufacturers_chart_data);

    // 动态计算图表高度
    const chartHeight = labels.length * 50 + 100
    manufacturersPieChartCanvas.parentNode.style.height = `${chartHeight}px`

    const config = {
      type: 'bar',
      data: {
        labels: labels,
        datasets: [{
          backgroundColor: ['yellow', 'red', 'green', 'blue'],
          data: data,
          hoverOffset: 4
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false, // 关闭宽高比约束
        categoryPercentage: 1,
        barPercentage: 0.8,
        scaleShowValues: false,
        indexAxis: 'y',
        scales: {
          y: { // v3版本正确的轴配置写法
            ticks: {
              autoSkip: false,
              maxTicksLimit: labels.length
            }
          }
        }
      }
    };

    let manufacturersPieChart = new Chart(
      manufacturersPieChartCanvas,
      config
    );
  }
})

内容的提问来源于stack exchange，提问作者rctneil