javascript - ChartJS - 渐变颜色重叠

Question

我有一个包含 2 个数据集的折线图，它们都填充了渐变。问题在于梯度重叠，这会显着改变“底部”数据集的颜色。

代码笔: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