Chart.js环形(doughnut)图调整标签字号、增大周长及对齐方法

增大Multimeter、UniBox等所有图表标签的字体大小，同时增大环形图的周长，实现图表正确对齐。

当前基于Chart.js 2.9.4的实现代码如下：

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>

<canvas id="myChart" style="width:100%;max-width:600px"></canvas>

<script>
    function getColors(length) {
        let pallet = ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"];
        let colors = [];
    
        for (let i = 0; i < length; i++) {
            colors.push(pallet[i % (pallet.length - 1)]);
        }
    
        return colors;
    }
var xValues = ['Multimeter', 'UniBox', 'Toby', 'Cables', 'Test'];
var yValues = [2, 100, 223, 84, 197];
var barColors = getColors(xValues.length);

new Chart("myChart", {
  type: "doughnut",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {
    title: {
      display: true,
      fontColor: 'rgb(255, 0, 0)',
      fontSize:25,
      text: "Products in shortage (by number)"
    }
  }
});
</script>

</body>
</html>

直接在options配置项中补充三类参数即可实现需求：

• 调整标签字号：在options.legend.labels中设置fontSize，控制所有分类标签的字体大小
• 调整环形尺寸：设置cutoutPercentage参数控制环形中间空心区域的占比，数值越小环形越粗，视觉上周长越大
• 优化对齐：配置layout.padding给图表四周添加足够内边距，避免标签被裁切，保证图表整体对齐

修改后完整的图表初始化代码如下：

new Chart("myChart", {
  type: "doughnut",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {
    // 控制环形空心占比，数值越小环形越粗
    cutoutPercentage: 60,
    // 图表四周内边距，避免内容裁切、保证对齐
    layout: {
      padding: 30
    },
    title: {
      display: true,
      fontColor: 'rgb(255, 0, 0)',
      fontSize:25,
      text: "Products in shortage (by number)"
    },
    // 图例标签配置
    legend: {
      labels: {
        fontSize: 18 // 调整标签字号，数值越大字体越大
      }
    }
  }
});

可根据实际显示效果调整参数数值：

• 需要更大的标签字体就增大fontSize的值
• 需要更粗的环形就减小cutoutPercentage的值，取值范围0-100
• 出现标签裁切、对齐偏移问题就增大layout.padding的值

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