Javascript Charts.js：薄甜甜圈图表背景

我想创建一个浅灰色背景的油炸圈饼图

我发现创建它的唯一方法是添加第二个甜甜圈图表来创建背景

有什么方法能让它更简单吗

HTML:

JavaScript:

var pointsUsed = [
    {
        value: 44250,
        color: "#FF5F33",
    },
    {
        value: 100000,
        color: "transparent",
    },
];

var pointsUsedBg = [
    {
        value: 100000,
        color: "#EEEEEE",
    },
];

var pointsUsed_ctx = document.getElementById("pointsUsed").getContext("2d");
var pointsUsedBg_ctx = document.getElementById("pointsUsedBg").getContext("2d");

var pointsUsed = new Chart(pointsUsed_ctx).Doughnut(pointsUsed, {
    segmentShowStroke: false,
    segmentStrokeWidth : 0,
    percentageInnerCutout: 87,
    showTooltips: false,
    animationEasing: 'easeInOutCubic',
    responsive: true
});

var pointsUsedBg = new Chart(pointsUsedBg_ctx).Doughnut(pointsUsedBg, {
    segmentShowStroke: false,
    segmentStrokeWidth : 0,
    percentageInnerCutout: 94,
    showTooltips: false,
    animation: false,
    responsive: true
});

---

谢谢

您可以扩展甜甜圈图表来实现这一点，如下所示

Chart.types.Doughnut.extend({
    name: "DoughnutAlt",
    initialize: function (data) {
        // call the actual initialize
        Chart.types.Doughnut.prototype.initialize.apply(this, arguments);

        // save the actual clear method
        var originalClear = this.clear;
        // override the clear method to draw the background after each clear
        this.clear = function () {
            // call the original clear method first
            originalClear.apply(this, arguments)

            var ctx = this.chart.ctx;
            // use any one of the segments to get the inner and outer radius and center x and y
            var firstSegment = this.segments[0];
            // adjust 0.3 to increaase / decrease the width of the background
            var gap = (firstSegment.outerRadius - firstSegment.innerRadius) * (1 - 0.3) / 2;

            // draw the background
            ctx.save();
            ctx.fillStyle = "#EEE";
            ctx.beginPath();
            ctx.arc(firstSegment.x, firstSegment.y, firstSegment.outerRadius - gap, 0, 2 * Math.PI);
            ctx.arc(firstSegment.x, firstSegment.y, firstSegment.innerRadius + gap, 0, 2 * Math.PI, true);
            ctx.closePath();
            ctx.fill();
            ctx.restore();
        }
    }
});

你会这样称呼它吗

var pointsUsed = new Chart(pointsUsed_ctx).DoughnutAlt(pointsUsed, {
    ...

---

---

小提琴-

谢谢！工作得很有魅力D

Chart.types.Doughnut.extend({
    name: "DoughnutAlt",
    initialize: function (data) {
        // call the actual initialize
        Chart.types.Doughnut.prototype.initialize.apply(this, arguments);

        // save the actual clear method
        var originalClear = this.clear;
        // override the clear method to draw the background after each clear
        this.clear = function () {
            // call the original clear method first
            originalClear.apply(this, arguments)

            var ctx = this.chart.ctx;
            // use any one of the segments to get the inner and outer radius and center x and y
            var firstSegment = this.segments[0];
            // adjust 0.3 to increaase / decrease the width of the background
            var gap = (firstSegment.outerRadius - firstSegment.innerRadius) * (1 - 0.3) / 2;

            // draw the background
            ctx.save();
            ctx.fillStyle = "#EEE";
            ctx.beginPath();
            ctx.arc(firstSegment.x, firstSegment.y, firstSegment.outerRadius - gap, 0, 2 * Math.PI);
            ctx.arc(firstSegment.x, firstSegment.y, firstSegment.innerRadius + gap, 0, 2 * Math.PI, true);
            ctx.closePath();
            ctx.fill();
            ctx.restore();
        }
    }
});

var pointsUsed = new Chart(pointsUsed_ctx).DoughnutAlt(pointsUsed, {
    ...