图表 js 甜甜圈框阴影答案

【问题标题】：Chart js doughnut box shadow图表 js 甜甜圈框阴影
【发布时间】：2021-06-23 23:32:08
【问题描述】：

我需要在甜甜圈后面添加一个阴影，我尝试使用 CSS 如下：

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

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

我该怎么做？

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

【问题讨论】：

恐怕没那么容易。 Chart.js 在画布上绘制。如果是 SVG，那么您可以使用 CSS 对其进行样式设置。但是在画布上你必须自己绘制阴影。我想它可以在一个插件中完成chartjs.org/docs/latest/developers/plugins.html

标签： javascript chart.js

【解决方案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>

【讨论】：

阴影不合适，它应该是圆形的，但它是一个矩形。可以告诉我圆盒阴影的例子

【解决方案2】：

在测试了几种方法后，定义了一个新插件，它可以连接到 beforeDraw 通知中以自定义画布的选项，这对我来说效果最好。

const ShadowPlugin = {
  beforeDraw: (chart, args, options) => {
    const { ctx } = chart;
    ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
  },
};

并在配置中创建图表时指定它：

const chart = new Chart(ctx, {
    options={...}
    data={...}
    plugins=[ShadowPlugin]
})

欲了解更多信息，请查看https://www.chartjs.org/docs/latest/developers/plugins.html

【讨论】：