我想在Chart.js中重新创建这个图表配色方案。到目前为止，我已经成功地为笔划和背景颜色创建了水平线性渐变，但我找不到一种方法来为背景颜色创建不透明蒙版，以将其“混合”到页面背景中。
这是我目前的图表

• 注意：* 我可以使用css属性在画布上创建一个不透明遮罩：

-webkit-mask-image: -webkit-gradient(linear, left 50%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
但是这种方法掩盖了图表的整个底部，例如图表的笔划

我该如何着手只屏蔽图表的背景色呢？

Chart.js设置

data = {
  labels: labels,
  datasets: [
    {
      label: 'Dataset 1',
      fill: true,
      data: Utils.numbers(NUMBER_CFG),
      borderColor: getGradient,
      pointBorderColor: getGradient,
      pointBackgroundColor: getGradient,
      pointHoverBackgroundColor: getGradient,
      pointHoverBorderColor: getGradient,
      backgroundColor: getGradient
    },
  ]
};

let width, height, gradient;
function gradient(ctx, chartArea) {
  const chartWidth = chartArea.right - chartArea.left;
  const chartHeight = chartArea.bottom - chartArea.top;
  if (!gradient || width !== chartWidth || height !== chartHeight) {
    // Create the gradient because this is either the first render
    // or the size of the chart has changed
    width = chartWidth;
    height = chartHeight;
    var gradientStroke = ctx.createLinearGradient(chartArea.right, chartArea.top, chartArea.left, chartArea.top);
    gradientStroke.addColorStop(0, "#80b6f4");
    gradientStroke.addColorStop(1, "#f49080");
  }

  return gradientStroke;
}

function getGradient(context) {
  const chart = context.chart;
  const {ctx, chartArea} = chart;

  if (!chartArea) {
    // This case happens on initial chart load
    return;
  }
  return gradient(ctx, chartArea);
}