Chart.js如何为每个数据集设置cutoutPercentages

Question

在这张图中，我希望数据集2比数据集1更加粗壮。如何制作自定义环形图像图片中的那样？

- Maybun

---

这可能是一个重复的问题：https://dev59.com/12Ei5IYBdhLWcg3wueN0 - 这解决了你的问题吗？ - Manfred Scheiner

编辑：之前没有看到，您希望为每个数据集设置不同的“cutoutPercentages”值。目前尚不可能，但在2017年9月，我们在github上创建了一个功能请求。您也可以找到一个有创意的解决方法：https://github.com/chartjs/Chart.js/issues/4724 - Manfred Scheiner

Answer 1

此功能在2019年的v2.8版本中添加 (https://github.com/chartjs/Chart.js/pull/5951)。

现在您可以使用weight属性为数据集分配相对宽度。

// following Timo Hulzenboom's example
datasets: [
  {
    data: [50, 30, 20],
    backgroundColor: ['#64D28C', '#F49356', '#F45656']
    weight: 0.33, // will be half as thick
  },
  {
    data: [memoryUsageValue, leftoverMemory],
    backgroundColor: [PercentageColor, '#FFFFFF']
    weight: 0.67,
  }
]

编辑：更多文档可在https://www.chartjs.org/docs/latest/charts/doughnut.html#styling找到。

- ATOMP

Answer 2

我也在寻找这个选项，但还没有找到。目前，我添加了一个额外的数据集，其中borderWidth: 42，以便内部数据或室外数据的边缘都能显示。

datasets: [
  {
    data: [100],
    backgroundColor: ['#FFFFFF'],
    borderWidth: 42
  },
  {
    data: [50, 30, 20],
    backgroundColor: ['#64D28C', '#F49356', '#F45656']
  },
  {
    data: [memoryUsageValue, leftoverMemory],
    backgroundColor: [PercentageColor, '#FFFFFF']
  }
]

彩色边框以展示其工作原理

无色边框以显示结果

- Timo Hulzenboom

Answer 3

有一个权重：可能你可以添加到你的数据集中

- Timo Hulzenboom