javascript - 如何在图表js分组条形图上垂直显示渐变？

Question

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

var rateOfReturn= document.getElementById("rateofreturn-chart-canvas").getContext('2d');

    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
                    },
                }]
            }
        }
    });

Answer 1

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

Chart.pluginService.register({
    beforeUpdate: function(chart) {
        // All the code added here will be executed before a chart update
    }
});

---

您还想使用 createLinearGradient创建可在 Canvas 中使用的渐变颜色:

var gradient = ctx.createLinearGradient(0,0,200,0); // Dimensions of the color rectangle
gradient.addColorStop(0,"green"); // First color
gradient.addColorStop(1,"white"); // Second color

---

现在您想将两者合二为一。让我们先看看它是如何工作的。

您首先必须添加您希望在图表数据中看到的两种渐变颜色:

datasets: [{
    label: "label1",
    backgroundColor: [
        ['#26343b', 'white'], // `white` and `#FFFFFF` both stand for a white color
        ['#26343b', 'white'],
        ['#26343b', 'white'],
        ['#26343b', 'white']
    ],
    data: [4, 6, 8, -3],
}, {
    // ...
}]

然后您需要在创建图表之前添加以下插件(使用 new Chart())，否则它不会不添加到图表的插件服务中:

Chart.pluginService.register({
    beforeUpdate: function(chart) {

        // For every dataset ...
        for (var i = 0; i < chart.config.data.datasets.length; i++) {

            // We store it
            var dataset = chart.config.data.datasets[i];

            // For every data in this dataset
            for (var j = 0; j < dataset.data.length; j++) {

                // We store the data model (graph information)
                var model = dataset._meta[0].data[j]._model;

                // We use the model to get the left & right borders X position 
                // and to create the gradient
                var start = model.x,
                    end = model.x + model.width,
                    gradient = rateOfReturn.createLinearGradient(start, 0, end - 5, 0);

                // The colors of the gradient that were defined in the data
                gradient.addColorStop(0, dataset.backgroundColor[j][0]);
                gradient.addColorStop(1, dataset.backgroundColor[j][1]);

                // We set this new color to the data background
                dataset.backgroundColor[j] = gradient;
            }
        }
    }
});

---

按照你的例子插件的结果，你可以找到on this jsFiddle :