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掩码或类似的东西？

谢谢！

标签： javascriptcsschart.js

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)");

代码笔