如何在Chart.js中缩小图表标签或实现滚动溢出效果？

一、缩小/优化标签，节省空间 #

如果只是想通过调整标签来释放图表空间，可以试试这几种方法：

1. 直接缩小标签字体 #

在图表配置的options.scales.x.ticks里设置更小的字体尺寸：

const chart = new Chart(ctx, {
  type: 'bar', // 替换为你的图表类型
  data: yourData,
  options: {
    scales: {
      x: {
        ticks: {
          font: {
            size: 10 // 根据需求调整，默认一般为12
          }
        }
      }
    }
  }
});

2. 旋转标签减少横向占用 #

把标签倾斜显示，避免横向挤在一起：

options: {
  scales: {
    x: {
      ticks: {
        maxRotation: 45, // 最大旋转角度
        minRotation: 45, // 强制统一角度
        padding: 5 // 调整标签与图表的间距
      }
    }
  }
}

3. 隐藏部分标签（按需显示） #

如果标签数量实在太多，可以只显示部分标签，比如每隔2个显示一个：

options: {
  scales: {
    x: {
      ticks: {
        callback: function(value, index, values) {
          // 仅显示偶数索引的标签，可根据需求修改规则
          return index % 2 === 0 ? this.getLabelForValue(value) : '';
        }
      }
    }
  }
}

二、实现可滚动的X轴标签效果 #

如果想保留所有标签，同时让标签区域可横向滚动，可以通过CSS+Chart.js配置实现：

步骤1：给图表容器加滚动样式 #

在HTML里给canvas套一个带横向滚动的容器：

<div style="overflow-x: auto; width: 100%;">
  <canvas id="myChart"></canvas>
</div>

步骤2：让图表自适应标签宽度 #

关闭图表的宽高比例锁定，根据标签数量手动设置canvas宽度：

const labelCount = yourData.labels.length;
const chartWidth = labelCount * 80; // 每个标签分配80px宽度，可按需调整

const chart = new Chart(ctx, {
  type: 'bar',
  data: yourData,
  options: {
    maintainAspectRatio: false, // 关闭自动比例锁定
    responsive: true,
    scales: {
      x: {
        ticks: {
          maxRotation: 0, // 不旋转标签，保持横向显示
          minRotation: 0
        }
      }
    }
  }
});

// 设置canvas的宽高
ctx.canvas.style.width = `${chartWidth}px`;
ctx.canvas.style.height = '400px'; // 固定图表高度，可调整

这样容器会出现横向滚动条，拖动就能查看所有标签，图表也不会被压缩。

内容的提问来源于stack exchange，提问作者Abinesh.co