如何修复Chart.js图表格式问题：标题、图例与标签截断

1. 环形图标题无法堆叠在正上方 #

问题原因 #

• 容器的col-span-0会让元素不占用网格列，导致布局异常，标题位置错乱
• 标题未显式指定顶部位置，且缺少行间距设置，多行文本堆叠效果差

修改方案 #

1. 将环形图容器的col-span-0改为col-span-1，确保占满网格列
2. 在标题配置中添加position: 'top'，并设置lineHeight控制行间距

修改后的核心代码片段：

<!-- 修正容器类 -->
<div class="col-span-1 w-full rounded-xl p-4" style="height: 400px; width: 100%;">
     <canvas id="chart_revenue"></canvas>
</div>

<script>
let chart_revenue = new Chart(ctx_revenue, {
     // ... 其他配置不变
     options: {
          plugins: {
               title: {
                    display: true,
                    position: 'top', // 显式指定标题在顶部
                    text: ["Revenue Distribution", "Total Revenue: ${{total_revenue}}", "Total Clients: {{total_clients}}"],
                    align: 'center',
                    padding: { top: 10, bottom: 20 },
                    font: { size: 18, weight: "bold" },
                    lineHeight: 1.5 // 控制多行标题的行间距
               }
          }
     }
});
</script>

2. 环形图图例向下微调位置 #

直接在legend配置中添加y属性设置垂直偏移量，配合padding实现精准微调：

legend: {
     display: true,
     position: "right",
     y: 30, // 向下偏移30像素，可根据需求调整数值
     padding: 10, // 图例整体内边距，辅助优化位置
     labels: {
          font: { size: 14 }
     }
}

3. 分组柱状图标签截断问题 #

问题原因 #

• x轴标签过长且未设置旋转，横向空间不足导致截断
• 原配置中maintainAspectRatio: true限制了图表自适应，Min大写导致y轴最小值设置无效

修改方案 #

1. 关闭固定比例，让图表自适应容器空间
2. 设置x轴标签旋转，关闭自动跳过标签
3. 修正y轴配置项的大小写错误

修改后的柱状图options配置：

options: {
     animation: {
          animateRotate: true,
          animateScale: true,
          duration: 1000,
          easing: "easeOutQuart"
     },
     responsive: true,
     maintainAspectRatio: false, // 关闭固定比例，自适应容器
     scales: {
          y: {
               min: 0, // 修正为小写min，配置项生效
               suggestedMax: 10
          },
          x: {
               ticks: {
                    maxRotation: 45, // 标签旋转45度避免截断
                    minRotation: 45,
                    autoSkip: false, // 显示所有标签
                    padding: 10 // 增加标签与轴的间距
               }
          }
     },
     // ... 其他plugins配置不变
}

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