ChartJS-渐变颜色重叠

Question

我有一个包含2个数据集的折线图，并且两个数据均填充有渐变。问题在于梯度重叠，从而大大改变了“底部”数据集的颜色。

Codepen：https://codepen.io/SimeriaIonut/pen/ydjdLz

我的渐变及其位置：

var gradientFillPlanned = ctx.createLinearGradient(250.000, 0.000, 150.000, 500.000);
gradientFillPlanned.addColorStop(0, "rgba(128, 182, 244, 0.6)");
gradientFillPlanned.addColorStop(1, "rgba(128, 182, 244, 0.0)");

var gradientFillActual = ctx.createLinearGradient(250.000, 0.000, 150.000, 500.000);
gradientFillActual.addColorStop(0, "rgba(244, 144, 128, 0.6)");
gradientFillActual.addColorStop(1, "rgba(244, 144, 128, 0.0)");

有没有一种方法只能将“顶部”数据集渲染到底部数据集的起始位置？像CSS遮罩之类的东西？

谢谢！

Answer 1

这是由于rgba中的透明度，例如0.6。你可以试试这个

var gradientFillActual = ctx.createLinearGradient(250.0, 0.0, 150.0, 500.0);
gradientFillActual.addColorStop(0, "rgba(249,190,240, 1)");
gradientFillActual.addColorStop(1, "rgba(255,255,255, 1)");

CodePen