我需要在 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,
});
最佳答案
您可以执行以下操作:
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>
关于javascript - Chart js donut 框阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45029660/