javascript - Chart js donut 框阴影

Question

我需要在 donut 后面添加阴影，我尝试使用如下 CSS:

canvas {
  box-shadow: 12px 21px 24px 0px rgba(0, 0, 0, 0.21);
}

但这会将阴影应用于 Canvas 框，而不是 donut 。

我该怎么做？

var myChart = new Chart(ctx, {
        type   : 'doughnut',
        data   : data,
  });

Answer 1

您可以执行以下操作:

  var draw = Chart.controllers.doughnut.prototype.draw;
    Chart.controllers.doughnut = Chart.controllers.doughnut.extend({
    draw: function() {
        draw.apply(this, arguments);
        let ctx = this.chart.chart.ctx;
        let _fill = ctx.fill;
        ctx.fill = function() {
            ctx.save();
            ctx.shadowColor = 'blue';
            ctx.shadowBlur = 25;
            ctx.shadowOffsetX = 2;
            ctx.shadowOffsetY = 2;
            _fill.apply(this, arguments)
            ctx.restore();
        }
    }
    });
  
  
  var ctx = document.getElementById("doughnut-chart");
  var myDoughnutChart =new Chart(ctx,{
    type: 'doughnut',
    data: {
      labels: ["apple", "banana", "orange"],
      datasets: [
        {
          label: "Favourite",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f"],
          data: [1,2,3]
        }
      ]
    },
    options: {
      title: {
        display: false
      }
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<div>
<canvas id="doughnut-chart" width="600" height="300" style="background-color:#fff"></canvas></div>