グラデーションカラー

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： "rgb（11,98,162）"

この色を上から下に直線のグラデーションに変更したいと思います。どんな助けもありがたい。どうもありがとう。それは一番下に移動する。これは、赤色から黄色に変更するには、システムを言うだろう

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

：

Answer 1

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

Answer 2

あなたはとしてそれを試すことができます。