Javascript 如何在条形图上垂直显示渐变？

我正在使用Chart.js分组条形图。我想用渐变色显示我的条。当前显示如下图所示。任何帮助都将不胜感激

var rateOfReturn=document.getElementById（“rateOfReturn图表画布”）.getContext（“2d”）

你想用。它们允许您处理通过图表创建触发的一些事件，如初始化、调整大小等

Chart.pluginService.register({
更新前：功能（图表）{
//这里添加的所有代码都将在图表更新之前执行
}
});

---

您还希望使用创建画布中可用的渐变色：

var gradient=ctx.createLinearGradient（0,0200,0）；//颜色矩形的尺寸
gradient.addColorStop（0，“绿色”）；//第一颜色
渐变。添加颜色停止（1，“白色”）；//第二种颜色

---

现在，您希望将这两者结合使用。让我们先看看它是如何工作的

您首先必须添加两种颜色的渐变，以便在图表数据中看到：

数据集：[{
标签：“标签1”，
背景颜色：[
['#26343b'、'白色']、/'白色'和`#FFFFFF`都代表白色
['#26343b'，'白色']，
['#26343b'，'白色']，
['#26343b'，'白色']
],
数据：[4,6,8，-3]，
}, {
// ...
}]

然后，您需要在创建图表之前添加以下插件（使用

新建图表（）

），否则它将不会添加到图表的插件服务中：

Chart.pluginService.register({
更新前：功能（图表）{
//对于每个数据集。。。
对于（var i=0；i

---

以下是插件的结果和您的示例，您可以找到：

---

可能的@Keno重复该重复对于单个图表（例如直线）很有用，但当使用多个条形图时，就不那么容易了。我认为OP特别需要这个问题。@Tektiv这是真的。我试图找到的解决方案只是针对单一条形图，而不是针对我所寻找的组条形图。干得好。我需要一个从上到下的渐变，可以吗？@kdpatel我现在没有时间做这个，但是我相信你可以通过改变

createLineGradient

参数和模型高度和Y位置：）不用担心，谢谢。我想出来了这是V2.3的良好起点，但在V2.5下无法工作。您可以找到我试图使其工作，但悬停事件的问题仍未解决。V2.5的关键点：1）更新前->更新后，2）使用chart.getDatasetMeta（），3）model.backgroundColor=渐变

    var rateOfReturnData = {
        labels: ["Monthly", "Quarterly", "Semiannually", "Annually"],
        datasets: [
            {
                label: "label1",


                backgroundColor: [
                    '#26343b',
                    '#26343b',
                    '#26343b',
                    '#26343b'
                ],
                data: [4, 6, 8, -3],
            },
            {
                label: "",
                backgroundColor: [
                    '#be1a33',
                    '#be1a33',
                    '#be1a33',
                    '#be1a33'
                ],
                data: [6, 10, 11, 7],
            },
            {
                label: "",
                backgroundColor: [
                    '#00b786',
                    '#00b786',
                    '#00b786',
                    '#00b786'
                ],
                data: [13, 10, 9, 4],
            },
            {
                label: "",
                backgroundColor: [
                    '#f86929',
                    '#f86929',
                    '#f86929',
                    '#f86929'
                ],
                data: [6, 8, 2, 11],
            },
            {
                label: "",
                backgroundColor: [
                    '#046cd0',
                    '#046cd0',
                    '#046cd0',
                    '#046cd0'
                ],
                data: [4, 8, 7, 13],
            }

        ]

    };


    rateOfReturn.canvas.height = 80;
    var myBarChart = new Chart(rateOfReturn, {
        type: 'bar',
        data: rateOfReturnData,
        options: {
            legend:
            {
                display: false
            },
            scales:
            {
                xAxes: [{
                    title: "Test title",
                    ticks: {
                        beginAtZero: true,
                        titleFontWeight: "bold"
                    },

                }],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Rate Of Return (ROR) %    '
                    },
                    ticks: {
                        beginAtZero:true,
                        mirror:false,
                        suggestedMin: 0
                    },
                }]
            }
        }
    });