Question

我正在尝试将下面代码中的背景颜色更改为渐变但不确定如何处理此问题：

bandwidthChart = new Chart($("#bandwidthChart"), {
                    type: "bar",
                    data: {
                        labels: response.extra.labels,
                        datasets: [{
                            label: "{% trans "Bandwidth" %}",
                            backgroundColor: "rgb(11, 98, 164)",
                            data: response.extra.data
                        }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                scaleLabel: {
                                    display: true,
                                    labelString: response.extra.postUnits,
                                }
                            }]
                        },
                        legend: {
                            display: false
                        },
                        maintainAspectRatio: false,
                    }
                });

这就是我所拥有的：

backgroundColor：＆＃34; rgb（11,98,164）＆＃34;

我想将此颜色从上到下更改为线性渐变。任何帮助赞赏。非常感谢。

Answer 1

你可以尝试：

background: linear-gradient(to bottom, red , yellow);

这会告诉系统在移动到底部时从红色变为黄色。

Answer 2

有一个使用 Chart.js 2.7.1：

的代码段

var bar_ctx = document.getElementById('bandwidthChart').getContext('2d');
var purple_orange_gradient = bar_ctx.createLinearGradient(0, 0, 0, 600);
purple_orange_gradient.addColorStop(0, 'orange');
purple_orange_gradient.addColorStop(1, 'purple');

bandwidthChart = new Chart(, {
                    type: "bar",
                    data: {
                        labels: response.extra.labels,
                        datasets: [{
                            label: "{% trans "Bandwidth" %}",
                            backgroundColor: purple_orange_gradient,
                            data: response.extra.data
                        }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                scaleLabel: {
                                    display: true,
                                    labelString: response.extra.postUnits,
                                }
                            }]
                        },
                        legend: {
                            display: false
                        },
                        maintainAspectRatio: false,
                    }

演示：https://codepen.io/jonathandion/pen/aEpVba

backgroundColor JS中的渐变颜色

2 个答案: