chartjs问题ReactJS中混合条形图的线性梯度不是针对每个单独的条形图计算的

我们的要求是将条形图呈现为。我们正在使用chartJs库来呈现图表。我们能够呈现条形图，但对于其中一个条形图，我们需要显示 背景色为渐变色。为了实现这一点，我们使用了以下代码段： 但它呈现为。你能帮我按预期绘制图表吗。

const数据=[{
类型：“示例1”，
数据：[600400200800]
}, {
类型：“Sampel 2”，
数据：[700300600600]
}, {
类型：“总计”，
数据：[1300、700、800、1400]
}];
const gradient=document.getElementById（'myChart'）.getContext（'2d'）.createLinearGradient（0,250,0,0）；
渐变。添加颜色停止（1'#acd7fa'）
渐变。添加颜色停止（0.4'#FFFFFF'）
新图表（“myChart”{
输入：“酒吧”，
数据：{
标签：[“A”、“B”、“C”、“D”]，
数据集：[
{
标签：数据[0]。类型，
xAxisID:“x1”，
数据：数据[0]。数据，
//fillColor:background_1，
//highlightFill:背景_2，
背景色：“rgb（54162235）”，
//背景颜色：背景颜色1，
百分比：1，
},
{
标签：数据[1]。类型，
xAxisID:“x1”，
数据：数据[1]。数据，
背景色：“rgb（255、159、64）”，
百分比：1，
},
{
标签：数据[2]。类型，
xAxisID：“x2”，
数据：数据[2]。数据，
背景颜色：渐变色，
百分比：1，
},
],
},
选项：{
图例：{
标签：{
过滤器：item=>item.text！='Total'
}
},
比例：{
雅克斯：[{
滴答声：{
分:0,，
步长：200
}
}],
xAxes：[{
id:'x1'
},
{
id:'x2'，
显示：假，
偏移量：对
}
]
}
}
});

提供了一系列钩子，可用于执行自定义代码。您可以使用
afterLayout
钩子为第三个
数据集的每个值（总计）创建不同的渐变

请看下面修改后的代码，看看它是如何工作的。您也可以参考本手册，其中说明了如何使用
react-chartjs-2
完成此操作


const数据=[
{类型：“样本1”，数据：[600400200800]}，
{类型：“Sampel 2”，数据：[700300600600]}，
{类型：“总计”，数据：[1300、700、800、1400]}
];
新图表（“myChart”{
输入：“酒吧”，
插件：[{
后布局：图表=>{
设ctx=chart.chart.ctx；
ctx.save（）；
设yAxis=图表刻度[“y轴-0”]；
设yBottom=yAxis.getPixelForValue（0）；
让dataset=chart.data.datasets[2]；
dataset.backgroundColor=dataset.data.map（v=>{
设yTop=yAxis.getPixelForValue（v）；
设梯度=ctx.createLinearGradient（0，yBottom，0，yTop）；
渐变。添加颜色停止（0.4，#FFFFFF'）；
渐变。添加颜色停止（1，#acd7fa'）；
回归梯度；
});
ctx.restore（）；
}
}],
数据：{
标签：[“A”、“B”、“C”、“D”]，
数据集：[{
标签：数据[0]。类型，
xAxisID:“x1”，
数据：数据[0]。数据，
背景色：“rgb（54162235）”，
百分比：1
},
{
标签：数据[1]。类型，
xAxisID:“x1”，
数据：数据[1]。数据，
背景色：“rgb（255、159、64）”，
百分比：1
},
{
标签：数据[2]。类型，
xAxisID：“x2”，
数据：数据[2]。数据，
百分比：1
}
]
},
选项：{
图例：{
标签：{
过滤器：item=>item.text！='Total'
}
},
比例：{
雅克斯：[{
滴答声：{
分:0,，
步长：200
}
}],
xAxes：[{
id:'x1'
},
{
id:'x2'，
显示：假，
偏移量：对
}
]
}
}
});