Chart JS能否设置多个标题？或实现顶部标题+底部描述？

好问题！Chart.js 原生的 title 配置确实只支持单个标题，但有几种简单的方案能帮你实现「顶部主标题+底部描述」的效果，我给你整理两个最实用的：

方案1：用HTML元素搭配（最简单易维护） #

这种方式不需要修改Chart.js的复杂配置，直接用HTML在画布上下方分别添加标题和描述，样式也更容易自定义：

<!-- 包裹图表的容器 -->
<div class="chart-wrapper">
  <h3 class="chart-main-title">我的顶部主标题</h3>
  <canvas id="myChart"></canvas>
  <p class="chart-desc">这是底部的描述文本，用来补充图表说明</p>
</div>

添加一点CSS让布局更协调：

.chart-wrapper {
  width: 70%;
  margin: 2rem auto;
  text-align: center;
}
.chart-main-title {
  margin: 0 0 1rem 0;
  color: #2d3748;
}
.chart-desc {
  margin: 1rem 0 0 0;
  color: #718096;
  font-size: 0.9rem;
}

你的Chart.js配置可以简化，不需要再处理title的位置：

var chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    // 这里可以去掉title配置，或者保留也不影响
  }
});

方案2：自定义Chart.js插件（在画布内实现双标题） #

如果你希望标题和描述都显示在图表画布内部（比如导出图片时能包含进去），可以用Chart.js的自定义插件来添加第二个标题：

var chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    // 用原生title做底部描述
    title: {
      display: true,
      text: '底部描述文本：这是图表的详细说明',
      position: 'bottom',
      font: {
        size: 12,
        style: 'italic'
      },
      color: '#718096'
    },
    // 自定义插件的配置项
    plugins: {
      topTitle: {
        text: '顶部主标题',
        font: {
          size: 16,
          weight: 'bold'
        },
        color: '#2d3748'
      }
    }
  },
  // 注册自定义插件
  plugins: [{
    id: 'topTitle',
    beforeDraw: (chart) => {
      const ctx = chart.ctx;
      const config = chart.options.plugins.topTitle;
      if (!config?.text) return;

      // 计算标题的位置（水平居中，距离顶部20px）
      const chartArea = chart.chartArea;
      const titleX = chartArea.left + (chartArea.right - chartArea.left) / 2;
      const titleY = chart.top + 20;

      // 设置文本样式
      ctx.font = `${config.font.weight || 'normal'} ${config.font.size}px ${config.font.family || 'sans-serif'}`;
      ctx.fillStyle = config.color || '#333';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'top';

      // 绘制顶部标题
      ctx.fillText(config.text, titleX, titleY);
    }
  }]
});

这个插件会在图表绘制前，在画布顶部居中位置添加你设置的主标题，同时原生的title负责底部的描述，完全满足你的需求。

小提示 #

• 如果只需要简单的文本补充，优先选方案1，开发和维护成本都更低；
• 如果需要导出带标题的图表图片，方案2更合适，因为插件绘制的内容会包含在画布内。

内容的提问来源于stack exchange，提问作者Jens Törnell