Chart.js环形图：为外部边框与图表内容之间添加内边距

嘿，我完全懂你的需求啦——就是想让环形图和外面的边框之间留出一段空隙，而不是像现在这样紧紧贴在一起对吧？其实用Chart.js自带的配置就能轻松搞定这个问题~

你只需要在图表的options配置里添加layout.padding属性，它能控制图表内容和canvas容器边缘（也就是你的边框所在位置）之间的距离，这样就能实现你想要的效果了。具体修改如下：

修改后的完整代码 #

const data = {
  labels: ['onek', 'teo', 'Three'],
  datasets: [{
    data: [1, 3, 9],
    backgroundColor: [],
    borderColor: [],
    hoverOffset: 4
  }]
};

var chart = new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  data: data,
  options: {
    responsive: true,
    legend: {
      display: false
    },
    // 新增的layout配置，添加内边距
    layout: {
      padding: 10 // 这个数值可以根据你想要的空隙大小自由调整
    }
  }
});

jQuery(function($) {
  // 这里保留你原本的formatPrice函数逻辑即可
  function formatPrice(rawAmount) {
    // 你的函数代码...
  }
});

额外小技巧 #

如果需要更精细地控制不同方向的内边距（比如上下和左右留不同的空隙），还可以把padding改成对象形式：

layout: {
  padding: {
    top: 5,
    right: 10,
    bottom: 5,
    left: 10
  }
}

这样调整后，你的环形图就会和外部边框之间留出合适的空隙，和你期望的效果一致啦~

备注：内容来源于stack exchange，提问作者Beep