Chart.js设置“甜甜圈”背景色？ [英] Chart.js set Doughnut background-color?

问题描述

我正在使用Chart.js（文档），但我似乎无法为甜甜圈路径设置背景色。在文档中甚至都没有提到。

I'm using Chart.js (documentation), but I can't seem to set a background color to the Donut path. It isn't even mentioned in the docs.

我要实现的目标：

当前代码：

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的重复甜甜圈（第二个画布），没有动画和我想要的（背景）颜色来解决该问题，并将其绝对放置在第一个下面。

---

UPDATE: I currently solved it by using a duplicate Donut (2nd canvas) with a value of 100, no animation and my desired (background-) color, and positioned it absolute, underneath the 1st one.

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

However, this is a nasty trick, and very inefficient, so I'm still hoping for a correct answer.

推荐答案

我通过使用值为100，没有动画和所需背景色的重复甜甜圈（第二个画布）解决了该问题，并将其绝对放置在第一个下面。

I solved it by using a duplicate Donut (2nd canvas) with a value of 100, no animation and my desired background-color, and positioned it absolute, underneath the 1st one.

但是，这是一个令人讨厌的窍门，而且效率很低，所以我仍然希望能找到正确的答案。

However, this is a nasty trick, and very inefficient, so I'm still hoping for a correct answer.

这篇关于Chart.js设置“甜甜圈”背景色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！