如何根据屏幕尺寸调整Chart.js图表中的字体大小？

首先得明确：Chart.js的图表文本是直接绘制在<canvas>画布上的，不属于普通DOM元素，所以给父容器加Tailwind的text-md/sm:text-lg这类样式完全没用——这些样式只作用于DOM文本节点，管不到canvas里渲染的内容。

你已经用responsive: true解决了基础适配问题，这是最省心的方案，但如果需要更精细的控制（比如单独调整标题、刻度、图例的字体大小，或者和页面其他元素的字体断点完全同步），可以试试下面几种方法：

1. 用Chart.js内置的回调函数动态设置字体 #

Chart.js允许在配置项的字体设置中传入函数，根据当前容器/窗口尺寸返回对应的字体参数。这种方式能针对图表的不同组件（标题、刻度、图例）单独配置响应式大小：

const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'bar',
  data: { /* 你的数据 */ },
  options: {
    responsive: true,
    scales: {
      x: {
        ticks: {
          font: (context) => {
            // 根据画布宽度动态调整刻度字体大小
            const canvasWidth = ctx.canvas.offsetWidth;
            return {
              size: canvasWidth < 640 ? 10 : canvasWidth < 1024 ? 12 : 14
            };
          }
        },
        title: {
          display: true,
          text: 'X轴标题',
          font: (context) => {
            const canvasWidth = ctx.canvas.offsetWidth;
            return {
              size: canvasWidth < 640 ? 12 : canvasWidth < 1024 ? 14 : 16
            };
          }
        }
      }
    },
    plugins: {
      legend: {
        labels: {
          font: (context) => {
            const canvasWidth = ctx.canvas.offsetWidth;
            return {
              size: canvasWidth < 640 ? 10 : canvasWidth < 1024 ? 12 : 14
            };
          }
        }
      },
      title: {
        display: true,
        text: '图表主标题',
        font: (context) => {
          const canvasWidth = ctx.canvas.offsetWidth;
          return {
            size: canvasWidth < 640 ? 14 : canvasWidth < 1024 ? 16 : 18
          };
        }
      }
    }
  }
});

2. 监听窗口resize事件，结合Tailwind断点同步更新 #

如果想让图表字体的断点和Tailwind的设计系统完全一致，可以手动监听窗口尺寸变化，更新图表配置后调用update()方法：

const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'line',
  data: { /* 你的数据 */ },
  options: {
    responsive: true,
    scales: {
      y: {
        ticks: { font: { size: 12 } }
      }
    },
    plugins: {
      legend: { labels: { font: { size: 12 } } }
    }
  }
});

// 定义字体更新逻辑
function updateChartFonts() {
  const viewportWidth = window.innerWidth;
  let baseSize = 10;
  
  if (viewportWidth >= 1024) baseSize = 14; // Tailwind lg断点
  else if (viewportWidth >= 640) baseSize = 12; // Tailwind sm断点

  // 更新各组件字体大小
  myChart.options.scales.y.ticks.font.size = baseSize;
  myChart.options.plugins.legend.labels.font.size = baseSize;
  myChart.options.plugins.title.font.size = baseSize + 4; // 标题比基础大一号

  // 刷新图表
  myChart.update();
}

// 初始化执行一次
updateChartFonts();
// 监听窗口resize
window.addEventListener('resize', updateChartFonts);

方案对比 #

• responsive: true：最简便，适合只需要整体缩放图表的场景，但无法单独控制文本大小。
• 回调函数方式：无需额外监听事件，Chart.js会自动在重绘时计算字体大小，适合精细控制不同组件的样式。
• resize监听方式：能和Tailwind等CSS框架的断点完全对齐，适合需要页面样式统一的场景。

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