Javascript 如何在Chart.js中为每个区域应用不同的背景色

在react-chartjs-2中

在折线图中每个网格应有不同的背景色

这个图书馆能做到吗

这是折线图的外观：

这是我的代码/配置：

const options = {
        responsive: true,
        scales: {
            y: {
                grid: {
                    backgroundColor: [
                        'rgba(36, 206, 0, 0.8)',
                        'rgba(255, 255, 0, .8)',
                        'rgba(255, 162, 0, 0.8)',
                        'rgba(36, 206, 0, 0.8)',
                    ],
                },
    };

感谢阅读。

您可以使用以下方法实现：

var GradientBgPlugin={
beforeDraw：函数（图表、参数、选项）{
const ctx=chart.ctx；
const canvas=chart.canvas；
const chartArea=chart.chartArea；
//图表背景
var gradientBack=canvas.getContext（“2d”）.createLinearGradient（0,250,0,0）；
gradientBack.addColorStop（0，“rgba（213235248,1）”）；
gradientBack.addColorStop（0.16，“rgba（213235248,1）”）；
gradientBack.addColorStop（0.17，“rgba（226245234,1）”）；
渐变后退。添加颜色停止（0.25，“rgba（226245234,1）”；
gradientBack.addColorStop（0.26，“rgba（252244219,1）”）；
gradientBack.addColorStop（0.5，“rgba（252244219,1）”）；
渐变背向。addColorStop（0.51，“rgba（251221,1）”）；
gradientBack.addColorStop（1，“rgba（251221,1）”；
ctx.fillStyle=渐变后退；
ctx.fillRect（chartArea.left、chartArea.bottom、，
chartArea.right-chartArea.left，chartArea.top-chartArea.bottom）；
}
};您可以编写一个自定义内联插件，在图表区域绘制颜色。在“选项”区域中，您可以放置一个对象，其中包含所需的所有部分、从何处到何处以及它们需要的颜色

例如：


var选项={
键入：“行”，
数据：{
标签：[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”]，
数据集：[{
标签：“#投票数”，
数据：[100,19,3,5,2,3]，
边框宽度：1
},
{
标签：“#个点”，
数据：[7,11,5,8,3,7]，
边框宽度：1
}
]
},
选项：{
插件：{
背景：{
HBA：[{
起:28,，
致:100,，
颜色：“rgb（195230195）”
},
{
起:20,，
致:28，
颜色：“rgb（230220195）”
},
{
起:0,，
致:20,，
颜色：“rgb（230195195195）”
}
]
}
}
},
插件：[{
id:'背景'，
绘制前：（图表、参数、选项）=>{
常数{
ctx，
查特区，
比例：{
Y
}
}=图表；
options.hbars.forEach（（hBar）=>{
ctx.save（）；
ctx.fillStyle=hBar.color；
ctx.fillRect（chartArea.left，y.getPixelForValue（hBar.from），chartArea.right-chartArea.left，y.getPixelForValue（hBar.to）-y.getPixelForValue（hBar.from））；
ctx.restore（）；
})
}
}]
}
var ctx=document.getElementById（'chartJSContainer'）.getContext（'2d'）；
新图表（ctx，选项）

我不理解这个问题嘿@skobaljic，快速提问，这个插件配置在react-chartjs-2中对我不起作用，问题是：你确定这在react-chartjs-2中应该起作用吗？为了确保我这边的语法有问题。请检查上面的react语法，我添加了一个示例。（poz imenjače）此配置在react-chartjs上不起作用，您知道如何调整此代码以在react-chartjs-2上工作吗？