Javascript 如何修复渐变的偏移以与图表点（chart.js）对齐？

我试着用线性渐变把背景色放在一张折线图上，就像你在图像上看到的那样。 但不幸的是gradient.addColorStop的偏移量与图表不一致。 我还尝试了硬编码偏移量的值（0,0.25,0.5,0.75,1），它也显示了这个问题

const chartConfiguration = {
  type: 'line',
  data: {
    labels: ['21/12', '22/12', '23/12', '24/12', '25/12', '26/12', '27/12']
    datasets: [{
      data: [20.2, 31.2, 18.4, 20.1, 15.2, 23.6, 20.1],
      label: 'example',
      fill: true
    }]
  },
  options: {
    legend: {
      display: false
    },
    elements: {
      point: {
        radius: 0
      }
    },
    scales: {
      xAxes: [{
        gridLines: {
          color: 'rgba(0, 0, 0, 0)',
          display: false
        },
        ticks: {
          display: false
        }
      }],
      yAxes: [{
        gridLines: {
          color: 'rgba(0, 0, 0, 0)',
          display: false
        },
        ticks: {
          beginAtZero: true,
          display: false
        }
      }]
    }
  },
  plugins: [{
    beforeInit: (chartInstance, options) => {
      let trend: 'positive' | 'negative' = data[0] < data[1] ? 'positive' : 'negative';
      let startPosition = 0;
      let numOfItems = 0;
      const dim = 1 / (data.length - 1);
      const gradient = chartInstance.ctx.createLinearGradient(0, 0, 270, 0);

      for (let i = 0; i < data.length - 1; i++) {
        const newTrend = data[i] < data[i + 1] ? 'positive' : 'negative';
        if (newTrend !== trend) {
          const endPosition = startPosition + dim * numOfItems;
          addFillColor(startPosition, endPosition, trend, gradient);
          trend = newTrend;
          startPosition += dim * numOfItems;
          numOfItems = 1;
        } else {
          numOfItems++;
        }
      }

      addFillColor(startPosition, 1, trend, gradient);
      chartInstance.data.datasets[0].backgroundColor = gradient;
    }
  }]
}

const addFillColor = (startPosition: number, endPosition: number, trend: 'positive' | 'negative', gradient: CanvasGradient) => {
  const color = trend === 'positive' ? 'green' : 'red';
  gradient.addColorStop(startPosition, color);
  gradient.addColorStop(endPosition, color);
};

const chart配置={
键入：“行”，
数据：{
标签：['21/12'，'22/12'，'23/12'，'24/12'，'25/12'，'26/12'，'27/12']
数据集：[{
数据：[20.2,31.2,18.4,20.1,15.2,23.6,20.1]，
标签：“示例”，
填充：正确
}]
},
选项：{
图例：{
显示：假
},
要素：{
要点：{
半径：0
}
},
比例：{
xAxes：[{
网格线：{
颜色：“rgba（0,0,0,0）”，
显示：假
},
滴答声：{
显示：假
}
}],
雅克斯：[{
网格线：{
颜色：“rgba（0,0,0,0）”，
显示：假
},
滴答声：{
贝吉纳泽罗：是的，
显示：假
}
}]
}
},
插件：[{
beforeInit：（chartInstance，options）=>{
let trend:'正'|'负'=数据[0]<数据[1]？'正'：'负'；
设startPosition=0；
设numOfItems=0；
常数dim=1/（data.length-1）；
const gradient=chartInstance.ctx.createLinearGradient（0,0,270,0）；
for（设i=0；i{
常量颜色=趋势=='正'？'绿色'：'红色'；
渐变。添加颜色停止（起始位置，颜色）；
渐变。添加颜色停止（结束位置，颜色）；
};

---

您需要

xAxis

，该xAxis包含创建

渐变所需的属性（
left
，
right
），以及
getpixelftick
方法来计算色块的
偏移量

请看下面修改后的代码，看看它是如何工作的


新图表（“myChart”{
键入：“行”，
插件：[{
后布局：图表=>{
设ctx=chart.chart.ctx；
ctx.save（）；
设xAxis=图表。比例['x轴-0']；
设gradient=ctx.createLinearGradient（xAxis.left，0，xAxis.right，0）；
让data=chart.data.datasets[0].data；
让颜色；
data.forEach（（v，i）=>{
设x=xAxis.getPixelForTick（i）-xAxis.left；
设偏移量=1/（xAxis.right-xAxis.left）*x；
如果（颜色）{
渐变。添加颜色停止（偏移，颜色）；
}
if（i<数据长度）{
颜色=数据[i+1]>v“绿色”：“红色”；
渐变。添加颜色停止（偏移，颜色）；
}
});
chart.data.dataset[0]。backgroundColor=渐变；
ctx.restore（）；
}
}],
数据：{
标签：['21/12'，'22/12'，'23/12'，'24/12'，'25/12'，'26/12'，'27/12']，
数据集：[{
数据：[20.2,31.2,18.4,20.1,15.2,23.6,20.1]，
标签：“示例”，
填充：正确
}]
},
选项：{
图例：{
显示：假
}
}
});

您正在使用哪个库
chart.js
或
echart
？我使用chart.js