所以我尝试为ChartJS圆环图制作渐变填充,但这只能在水平方向上工作,而不是在圆形中。
这是我正在使用的代码:
var ctx = document.getElementById("chart-area").getContext("2d");
var gradient1 = ctx.createLinearGradient(0, 0, 0, 175);
gradient1.addColorStop(0.0, '#ACE1DB');
gradient1.addColorStop(1.0, '#7FBDB9');
var gradient2 = ctx.createLinearGradient(0, 0, 400, 400);
gradient2.addColorStop(0, '#B5D57B');
gradient2.addColorStop(1, '#98AF6E');
var gradient3 = ctx.createLinearGradient(0, 0, 0, 175);
gradient3.addColorStop(0, '#E36392');
gradient3.addColorStop(1, '#FE92BD');
var gradient4 = ctx.createLinearGradient(0, 0, 0, 175);
gradient4.addColorStop(1, '#FAD35E');
gradient4.addColorStop(0, '#F4AD4F');
/* ADD DATA TO THE DOUGHNUT CHART */
var doughnutData = [
{
value: 80,
color: gradient1,
highlight: "#E6E6E6",
label: "NUTRIENTS"
},
{
value: 20,
color:"#E6F1EE"
},
{
value:50,
color: gradient2,
highlight: "#E6E6E6",
label: "PROTEINE"
},
{
value: 50,
color:"#E6F1EE"
},
{
value: 75,
color: gradient3,
highlight: "#E6E6E6",
label: "FETTE"
},
{
value:25,
color:"#E6F1EE"
},
{
value: 77,
color: gradient4,
highlight: "#E6E6E6",
label: "CARBS"
}
{
value: 23,
color:"#E6F1EE"
},
];
是否可以在半径上实现渐变,如此设计所示?
谢谢!
在您的圆环图等非线性路径上绘制线性渐变时,ChartJS不会(正确)使用渐变填充颜色。线性渐变不会弯曲。
情形#1 - 使用径向渐变
您可以尝试使用径向渐变,看看结果是否符合您的设计需求。
情形#2 - 使用渐变笔画(DIY项目)
此外,画布的笔划将围绕圆形曲线。
如果你想“滚动你自己的”渐变圆环图,这里的示例代码和一个在圆形路径上使用渐变strokeStyle的Demo(请参阅我之前的答案:Angle gradient in canvas):
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
function drawMultiRadiantCircle(xc, yc, r, radientColors) {
var partLength = (2 * Math.PI) / radientColors.length;
var start = 0;
var gradient = null;
var startColor = null,
endColor = null;
for (var i = 0; i < radientColors.length; i++) {
startColor = radientColors[i];
endColor = radientColors[(i + 1) % radientColors.length];
// x start / end of the next arc to draw
var xStart = xc + Math.cos(start) * r;
var xEnd = xc + Math.cos(start + partLength) * r;
// y start / end of the next arc to draw
var yStart = yc + Math.sin(start) * r;
var yEnd = yc + Math.sin(start + partLength) * r;
ctx.beginPath();
gradient = ctx.createLinearGradient(xStart, yStart, xEnd, yEnd);
gradient.addColorStop(0, startColor);
gradient.addColorStop(1.0, endColor);
ctx.strokeStyle = gradient;
ctx.arc(xc, yc, r, start, start + partLength);
ctx.lineWidth = 30;
ctx.stroke();
ctx.closePath();
start += partLength;
}
}
var someColors = [];
someColors.push('#0F0');
someColors.push('#0FF');
someColors.push('#F00');
someColors.push('#FF0');
someColors.push('#F0F');
drawMultiRadiantCircle(150, 150, 120, someColors);
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<canvas id="canvas" width=300 height=300></canvas>
是的,我最终做的就是这个。
第1步 - 抓住你的图表。
@ViewChild('slideDoughnutChart') slideDoughnutChart: BaseChartDirective;
第2步 - 声明一个const渐变并分配它。
const gradient = this.slideDoughnutChart.chart.ctx.createLinearGradient(0, 0, 0, 220);
第3步 - 将您想要看到的颜色推向渐变。
const colors = [];
for (let i = 0; i < 4; i++) {
gradient.addColorStop(0, 'rgb(37, 77, 180)');
gradient.addColorStop(1, 'rgb(123, 98, 221)');
colors.push(gradient);
}
在这里,我推了相同的颜色。
第4步 - 将圆环图颜色变量设置为颜色数组。
this.slideDoughnutChartColors = [{ backgroundColor: colors }];
步骤5 - 将slideDoughnutChartColors变量指定给画布中的颜色绑定。
<canvas class="chartjs canvasResponsive" baseChart #slideDoughnutChart="base-chart" [colors]="slideDoughnutChartColors" ></canvas>
如果您正确地按照步骤操作,您将以此结束。
对于4种不同的颜色,您需要创建4个不同的变量。例如像这样的东西。
const gradientOne = this.slideDoughnutChart.chart.ctx.createLinearGradient(0, 0, 0, 400);
const gradientTwo = this.slideDoughnutChart.chart.ctx.createLinearGradient(0, 0, 100, 400);
const gradientThree = this.slideDoughnutChart.chart.ctx.createLinearGradient(0, 0, 0, 400);
const gradientFour = this.slideDoughnutChart.chart.ctx.createLinearGradient(0, 0, 0, 400);
然后做这样的事情。
for (let i = 0; i < this.slideDoughnutChartData.length; i++) {
switch (i) {
case 0:
gradientOne.addColorStop(0, 'rgb(223, 43, 100)');
gradientOne.addColorStop(1, 'rgb(224, 105, 84)');
colors.push(gradientOne);
break;
case 1:
gradientTwo.addColorStop(0, 'rgb(248, 188, 80)');
gradientTwo.addColorStop(1, 'rgb(243, 217, 53)');
colors.push(gradientTwo);
break;
case 2:
gradientThree.addColorStop(0, 'rgb(147, 229, 151)');
gradientThree.addColorStop(1, 'rgb(3, 220, 179)');
colors.push(gradientThree);
break;
case 3:
gradientFour.addColorStop(0, 'rgb(123, 98, 221)');
gradientFour.addColorStop(1, 'rgb(37, 77, 180)');
colors.push(gradientFour);
break;
}
}
将结束你。
这是我的图表数据。
this.slideDoughnutChartData = [25, 35, 20, 25, 2];