附上标签是否可以避免Chart.js饼图的缩小？

Question

要在 Chart.js 饼图和甜甜圈图上获取标签，有一些插件可以这样做，例如：chartjs-plugin-labels但这样做之后我注意到我的 UI 设计存在一个大问题：

实际图表的大小会缩小，以便标签适合画布。标签需要能够适应它们呈现的画布，从而缩小图表，这是有道理的。但有时我可能会使用标签，而其他时候则不会，并且无论如何我都需要我的饼图呈现相同的大小。

无论是否应用标签，Chart.js（我使用的标签插件与 < 3.0 兼容，我使用的是 2.9）或 chartjs-plugin-labels 的设置中是否有解决方案来保持一致的图表大小?

我尝试对每个图表应用一个空标签，但图表的大小实际上会根据所呈现标签的特定大小而缩小，因此除了是一个hacky 解决方案之外，它并不能始终如一地解决均匀性问题。

例如，也许有一种方法可以让图表开始占据画布的 50%？

Answer 1

是的，这实际上相当简单。该文件包含几行，当标签设置将位置设置为或chartjs-plugin-labels.js时，这些行会强制图表变小。将脚本下载到您自己的服务器，注释掉下面的行，一切都应该按预期工作。CodePen 演示"border""outside"

评论/删除这些行：

if (this.options.position === 'border') {
  offset = (lines.length - 1) * this.options.fontSize / 2;
}

if (label.options.position === 'outside') {
  someOutside = true;
  var padding = label.options.fontSize * 1.5 + label.options.outsidePadding;
  if (padding > maxPadding) {
    maxPadding = padding;
  }
}

这是您可以使用的更新后的 JS 文件： https: //pastebin.com/raw/gSffqqKu

只需将其下载为Chartjs-plugin-labels.js并在您的项目中使用它，而不是原始插件文件。