Javascript 如何根据yAxis值设置chartJs背景色的特定高度

我用

chartJs

正如您可以看到的

backgroundColor:'rgba（250174,50,1）

只为整个图表提供颜色。我需要的是背景颜色，直到一个特定的

yAxis

值。在这个例子中，直到200，我想看到橙色，其余为白色，如下所示

有什么方法可以做到这一点吗？

提供了一系列钩子，可用于执行自定义代码。您可以使用

afterLayout

钩子通过创建线性渐变，并将其指定给数据集的

backgroundColor

属性

plugins: [{
  afterLayout: c => {
    let dataset = c.data.datasets[0];
    let thresholdValueIndex = dataset.data.indexOf(dataset.fillThreshold);
    let xAxis = c.scales["x-axis-0"];
    let xRight = xAxis.getPixelForTick(thresholdValueIndex);
    let gradientFill = c.ctx.createLinearGradient(xAxis.left, 0, xRight, 0);
    gradientFill.addColorStop(0, "rgb(250,174,50");
    gradientFill.addColorStop(1, "rgb(250,174,50");
    gradientFill.addColorStop(1, "white");
    dataset.backgroundColor = gradientFill;
  }
}],

此代码要求在数据集上定义属性

fillThreshold

，其值必须与

data

数组中包含的值相对应

请看一下你的修正案