Question

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

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

有什么方法可以更简单吗？

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

谢谢！

Answer 1

你可以扩展圆环图来做到这一点，就像这样

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.net/7nfL1m7d/

Charts.js：薄圆环图表背景

1 个答案: