Chart.js标题紧凑放置问题：如何让标题更贴近仪表盘/饼图

问题根源在于你用rotation:270和circumference:180制作半环形仪表盘时，Chart.js会默认预留完整饼图的布局空间，导致顶部存在多余空白；同时标题默认的position: 'top'是相对于整个画布定位，而非图表区域，这就造成了标题和仪表盘间距过大。你之前调整的title.padding是标题自身的内边距，只会改变标题元素内部的空白，无法缩小和图表的间距，甚至可能让视觉上的距离更远。

可以通过以下两种方式快速解决：

方法一：调整布局留白+修改标题定位 #

1. 在options.layout.padding中减少顶部的布局留白，让图表区域向上移动
2. 将标题的position设为'chart'，让标题相对于图表区域而非整个画布定位
3. 调整title.padding.bottom来控制标题和图表的直接间距

修改后的代码示例：

var ctx103 = document.getElementById('chart103').getContext('2d');
new Chart(ctx103, {
  type: 'doughnut',
  data: {
    datasets: [{
      data: [80, 20],
      backgroundColor: ["green", "grey"]
    }]
  },
  options: {
    rotation: 270, // 起始角度
    circumference: 180, // 扇形角度
    layout: {
      padding: {
        top: 5, // 根据实际需求调整，可设负数让图表更靠上
        bottom: 0
      }
    },
    plugins: {
      title: {
        display: true,
        position: 'chart',
        text: 'TITLE !!!!!',
        padding: {
          bottom: 0 // 标题下方的内边距，直接控制和图表的间距
        }
      }
    }
  }
});

方法二：自定义标题绘制（精准控制位置） #

如果需要更精准的标题位置，可以使用Chart.js的自定义插件，直接在画布上指定坐标绘制标题：

var ctx103 = document.getElementById('chart103').getContext('2d');
new Chart(ctx103, {
  type: 'doughnut',
  data: {
    datasets: [{
      data: [80, 20],
      backgroundColor: ["green", "grey"]
    }]
  },
  options: {
    rotation: 270,
    circumference: 180,
    plugins: {
      // 禁用默认标题插件
      title: {
        display: false
      }
    }
  },
  plugins: [{
    id: 'customTitle',
    afterDraw: function(chart) {
      var ctx = chart.ctx;
      ctx.save();
      // 设置标题样式
      ctx.font = '16px Arial';
      ctx.textAlign = 'center';
      ctx.fillStyle = '#333';
      // 直接指定标题位置（x为画布中心，y为图表顶部附近）
      ctx.fillText('TITLE !!!!!', chart.width / 2, chart.chartArea.top - 10);
      ctx.restore();
    }
  }]
});

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