Chart.js能否通过CSS设置字体大小以实现响应式界面？

Chart.js的刻度、标签等文本是直接绘制在<canvas>画布上的，并非常规的DOM文本元素，所以无法直接用CSS选中这些文本设置样式。但可以通过CSS变量+Chart.js配置结合类切换的方式，实现按需求调整字体大小的效果，具体步骤如下：

1. 定义容器类对应的CSS变量 #

给Chart的容器元素设置不同尺寸类对应的字体大小变量：

/* 基础容器样式，设置默认变量值 */
.chart-container {
  --tick-font-size: 14px;
  --label-font-size: 16px;
}

/* 小屏类 */
.chart-container.sm {
  --tick-font-size: 12px;
  --label-font-size: 14px;
}

/* 大屏类 */
.chart-container.lg {
  --tick-font-size: 16px;
  --label-font-size: 18px;
}

/* 超大屏类 */
.chart-container.xl {
  --tick-font-size: 20px;
  --label-font-size: 22px;
}

2. 在Chart.js配置中引用CSS变量 #

创建Chart实例时，从容器的计算样式中读取CSS变量值，赋值给刻度和标签的字体大小配置：

// 获取容器元素
const chartContainer = document.getElementById('myChartContainer');
// 封装读取CSS变量的方法
const getFontSize = (varName) => {
  return parseInt(getComputedStyle(chartContainer).getPropertyValue(varName));
};

// 初始化Chart实例
const myChart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['一月', '二月', '三月', '四月'],
    datasets: [{
      label: '销售额',
      data: [1200, 1900, 3000, 5000],
      backgroundColor: 'rgba(54, 162, 235, 0.5)'
    }]
  },
  options: {
    scales: {
      x: {
        ticks: {
          font: {
            size: getFontSize('--tick-font-size')
          }
        }
      },
      y: {
        ticks: {
          font: {
            size: getFontSize('--tick-font-size')
          }
        }
      }
    },
    plugins: {
      legend: {
        labels: {
          font: {
            size: getFontSize('--label-font-size')
          }
        }
      }
    }
  }
});

3. 切换类并更新Chart #

当需要切换尺寸类时，给容器添加/移除对应的类，然后调用Chart的update()方法触发重新渲染：

// 示例：切换为大屏类
chartContainer.classList.remove('sm', 'xl');
chartContainer.classList.add('lg');
// 更新Chart以应用新的字体大小
myChart.update();

注意事项 #

• 必须通过getComputedStyle读取CSS变量，直接读取容器style属性无法获取类中定义的变量值；
• 读取到的变量值是带单位的字符串，需要用parseInt转为数字，符合Chart.js对font.size的数值类型要求；
• 切换类后必须调用update()，否则Chart不会重新渲染新的字体大小。

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