Chart.js折线图中的渐变过于模糊

Question

我在Chart.js中创建了一个带有颜色渐变的折线图，但颜色看起来很模糊，我无法区分它们。

它应该是这样的：

但最终看起来像这样：

我创建了一个渐变，应用于JavaScript中的画布图表。我不确定是不是因为我没有足够的颜色值，或者因为我的图表已经拉长了。

有人可以协助我解决这个问题吗？

这是我用于创建渐变的JS：

// Create gradient
grd = ctx.createLinearGradient(170.000, 600.000, 150.000, 0.000);

// Add colors
grd.addColorStop(0.000, 'rgba(0, 255, 0, 1.000)');
grd.addColorStop(0.200, 'rgba(191, 255, 0, 1.000)');
grd.addColorStop(0.400, 'rgba(221, 255, 0, 1.000)');
grd.addColorStop(0.600, 'rgba(255, 229, 0, 1.000)');
grd.addColorStop(0.800, 'rgba(255, 144, 0, 1.000)');
grd.addColorStop(1.000, 'rgba(255, 50, 0, 1.000)');

以下是我当前图表的Fiddle。

Answer 1

在创建线性渐变时，您似乎设置了错误的起点和终点坐标。

本文档可帮助您更好地了解坐标应设置为： https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient

将两个CGI坐标更改为0，以获得水平直线。然后，减少开始x并增加结束y以使开始和结束颜色更加明显。

<强>代码：

y

<强>截图：

<强>的jsfiddle：
https://jsfiddle.net/xg2k82rp/3/