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创建可在画布中使用的渐变颜色：

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：

如何在图表js分组条形图上垂直显示梯度？

1 个答案: