图表JS甜甜圈框阴影

Question

我需要在甜甜圈后面添加阴影，我尝试使用CSS进行如下操作：

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

但这会将阴影应用于画布框，而不是甜甜圈。

我怎样才能做到这一点？

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>