Javascript Chart.js设置甜甜圈背景色？

我使用的是Chart.js（），但我似乎无法为油炸圈饼路径设置背景色。文档中甚至没有提到它

我正在努力实现的目标：

当前代码：

var meterInvoicesData = [
    {
        value: 75,
        color: '#22d319'
    },
    {
        value: 25,     // rest
        color: 'transparent'  // invisible (setting this as background color will animate it too)
    }
];

var meterOptions =
{
    percentageInnerCutout : 80,
    animationEasing : 'easeInQuint'
};

var meterInvoices = new Chart(document.getElementById('meterInvoices').getContext('2d')).Doughnut(meterInvoicesData,meterOptions);

---

更新：我目前通过使用一个值为100的复制甜甜圈（第二块画布）解决了这个问题，没有动画和我想要的（背景）颜色，并将其绝对定位在第一块画布的下方

---

然而，这是一个令人讨厌的把戏，而且效率很低，所以我仍然希望得到一个正确的答案。

我解决了这个问题，使用了一个值为100的复制甜甜圈（第二块画布），没有动画和我想要的背景色，并将其绝对定位在第一块下面

---

然而，这是一个令人讨厌的把戏，而且效率非常低，因此我仍然希望得到正确的答案。

可能没有办法在canvas元素中实现这一点。 我会在画布之外放置一个绝对定位的元素。下面是一个例子：

.fakeCircle {
    position: absolute;
    z-index: 0;
    border-radius: 90px;
    -webkit-border-radius: 90px;
    -moz-border-radius: 90px;
    background-color: #dadce8;
    width: 50px;
    height: 50px;
    top: 12px;
    left: 12px;
}
.fakeCircle:after {
    position: absolute;
    z-index: 0;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    background-color: #fff;
    width: 34px;
    height: 34px;
    content: "";
}

---

我想我会发布一个最新的解决方案，使用v2.1.0，它引入了

无值图表显示背景与有值覆盖背景的图表相比，只有主图表将显示动画，背景只是一个简单的圆弧：

---

我首先注册了一个插件：

单例语法只是为了减少重复，并对多个插件事件使用相同的

draw

方法

---

然后我使用了我新注册的插件，如下所示：

var chartElement = document.getElementById('doughnut-chart');

var chart = new Chart(chartElement, {
  type: 'doughnut',
  options: {
    // Here is where we enable the 'radiusBackground'
    radiusBackground: {
      color: '#d1d1d1' // Set your color per instance if you like
    },
    cutoutPercentage: 90,
    title: {
      display: false,
    },
    legend: {
      display: false,
    },
  },
  data: {
    labels: ["Type 1", "Type 2", "Type 3"],
    datasets: [{
      data: [2, 5, 1],
      backgroundColor: ["#a3c7c9","#889d9e","#647678"],
      borderWidth: 0,
      hoverBackgroundColor: ["#96b7b9","#718283","#5c6b6d"]
    }]
  }
});

---

我使用了@Jonlunsford的代码，但当我将ChartJS升级到3.x时，它不起作用

根据报告，它说

Chart.innerRadius现在使用甜甜圈、馅饼和polarArea控制器

因此，我将代码更改为：

import { Chart, DoughnutController } from 'chart.js'

type DoughnutChartBackgroundPluginOptions = {
  enabled: boolean
  color: string
}

function handler(chart: Chart<'doughnut'>, args, options: DoughnutChartBackgroundPluginOptions) {
  const { ctx, width, height } = chart

  const { innerRadius } = chart.getDatasetMeta(chart.data.datasets.length - 1).controller as DoughnutController
  const { outerRadius } = chart.getDatasetMeta(0).controller as DoughnutController
  const radiusLength = outerRadius - innerRadius

  if (options.enabled) {
    const x = width / 2,
      y = height / 2

    ctx.beginPath()
    ctx.arc(x, y, outerRadius - radiusLength / 2, 0, 2 * Math.PI)
    ctx.lineWidth = radiusLength
    ctx.strokeStyle = options.color
    ctx.stroke()
  }
}

export default {
  id: 'doughnutChartBackground',
  beforeDatasetsDraw: handler,
}

---

如果你已经解决了这个问题，你应该在下面提供你自己的答案。我自己也遇到了这个问题，并且用同样的方法解决了它。不幸的是，我认为没有一种“正确”的方法可以做到这一点，因为Chart.js似乎不支持背景色。不过，这是一个很好的建议功能。为什么它不适用于最新的图表版本？与其他答案一样，您不需要对

onResize

使用相同的处理程序，因为在调整大小后也会调用绘制处理程序（因为图表是用新的大小重新绘制的）。谢谢@kurkle。你说得对。最后我删除了onResize处理程序！

import { Chart, DoughnutController } from 'chart.js'

type DoughnutChartBackgroundPluginOptions = {
  enabled: boolean
  color: string
}

function handler(chart: Chart<'doughnut'>, args, options: DoughnutChartBackgroundPluginOptions) {
  const { ctx, width, height } = chart

  const { innerRadius } = chart.getDatasetMeta(chart.data.datasets.length - 1).controller as DoughnutController
  const { outerRadius } = chart.getDatasetMeta(0).controller as DoughnutController
  const radiusLength = outerRadius - innerRadius

  if (options.enabled) {
    const x = width / 2,
      y = height / 2

    ctx.beginPath()
    ctx.arc(x, y, outerRadius - radiusLength / 2, 0, 2 * Math.PI)
    ctx.lineWidth = radiusLength
    ctx.strokeStyle = options.color
    ctx.stroke()
  }
}

export default {
  id: 'doughnutChartBackground',
  beforeDatasetsDraw: handler,
}

  ...
  plugins: {
    legend: {
      display: false,
    },
    doughnutBackground: {
      enabled: true,
      color: '#E4E6E6',
    },
    ...
  },