Charts.js：薄甜甜圈图背景 [英] Charts.js: thin donut chart background

问题描述

我想创建一个带有浅灰色背景的甜甜圈图。

I want to create a donut chart with a thin gray background in it.

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

The only way I found to create it is adding a second donut chart to create the background.

有什么办法吗？

HTML：

<div class="chart-cont">
    <canvas id="pointsUsed" height="200"></canvas>
    <canvas id="pointsUsedBg" height="200"></canvas>
</div>

CSS：

.chart-cont {
    position: relative;
}

#pointsUsed {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

#pointsUsedBg {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(0.96,0.96);
}

JavaScript：

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
});

JSFiddle

谢谢！

推荐答案

您可以像这样扩展Donut图表

You can extend the Doughnut chart to do this, like so

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, {
    ...

---

小提琴- http：// jsfiddle。净/ 7nfL1m7d /

这篇关于Charts.js：薄甜甜圈图背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！