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.

Is there any way to do it simpler?

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:

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

Thanks!

回答1:

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

You would call it like this

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

Fiddle - http://jsfiddle.net/7nfL1m7d/

来源：https://stackoverflow.com/questions/32580890/charts-js-thin-donut-chart-background

标签

javascript

charts

chart.js