圖表區域背景顏色chartjs

Question

我有圖表JS問題，我想着色圖表區域像上面

我嘗試從charJs Docs找到配置映像，但沒有相匹配。 其可能或不會更改圖表區域背景顏色？如果可能的話，任何人都可以幫我嗎？

的Html

<canvas id="barChart" width="600" height="300"></canvas> 

的Javascript

var ctx = document.getElementById("barChart"); 
var barChart = new Chart(ctx,{ 
    type: 'bar', 
    data: { 
    labels:["Label1","Label2","Label3","Label4"], 
    borderColor : "#fffff", 
    datasets: [ 
     { 
     data: ["2","3","1","4"], 
     borderColor : "#fff", 
     borderWidth : "3", 
     hoverBorderColor : "#000", 
     backgroundColor: [ 
      "#f38b4a", 
      "#56d798", 
      "#ff8397", 
      "#6970d5" 
     ], 
     hoverBackgroundColor: [ 
      "#f38b4a", 
      "#56d798", 
      "#ff8397", 
      "#6970d5" 
     ] 
     }] 
    }, 
    options: { 
    scales: { 
     yAxes: [{ 
     ticks:{ 
      min : 0, 
      stepSize : 1, 
      fontColor : "#000", 
      fontSize : 14 
     }, 
     gridLines:{ 
      color: "#000", 
      lineWidth:2, 
      zeroLineColor :"#000", 
      zeroLineWidth : 2 
     }, 
     stacked: true 
     }], 
     xAxes: [{ 
     ticks:{ 
      fontColor : "#000", 
      fontSize : 14 
     }, 
     gridLines:{ 
      color: "#fff", 
      lineWidth:2 
     } 
     }] 
    }, 
    responsive:false 
    } 
}); 

這裏是我當前的代碼jsFiddle

所以每個人都可以嘗試找到解決方案。 感謝您的幫助。

Answer 1

沒有內置的方法來改變背景顏色，但你可以使用CSS。 JSFiddle。

ctx.style.backgroundColor = 'rgba(255,0,0,255)'; 

編輯

如果你想填補圖表，沒有整個DIV的確切面積，您可以編寫自己的chart.js之插件。試試JSFiddle。

 Chart.pluginService.register({ 
      beforeDraw: function (chart, easing) { 
       if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) { 
        var ctx = chart.chart.ctx; 
        var chartArea = chart.chartArea; 

        ctx.save(); 
        ctx.fillStyle = chart.config.options.chartArea.backgroundColor; 
        ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top); 
        ctx.restore(); 
       } 
      } 
     }); 

     var config = { 
    type: 'bar', 
    data: { 
    labels:["Label1","Label2","Label3","Label4"], 
    borderColor : "#fffff", 
    datasets: [ 
     { 
     data: ["2","3","1","4"], 
     borderColor : "#fff", 
     borderWidth : "3", 
     hoverBorderColor : "#000", 
     backgroundColor: [ 
      "#f38b4a", 
      "#56d798", 
      "#ff8397", 
      "#6970d5" 
     ], 
     hoverBackgroundColor: [ 
      "#f38b4a", 
      "#56d798", 
      "#ff8397", 
      "#6970d5" 
     ] 
     }] 
    }, 
    options: { 
    scales: { 
     yAxes: [{ 
     ticks:{ 
      min : 0, 
      stepSize : 1, 
      fontColor : "#000", 
      fontSize : 14 
     }, 
     gridLines:{ 
      color: "#000", 
      lineWidth:2, 
      zeroLineColor :"#000", 
      zeroLineWidth : 2 
     }, 
     stacked: true 
     }], 
     xAxes: [{ 
     ticks:{ 
      fontColor : "#000", 
      fontSize : 14 
     }, 
     gridLines:{ 
      color: "#fff", 
      lineWidth:2 
     } 
     }] 
    }, 
    responsive:false, 
    chartArea: { 
     backgroundColor: 'rgba(251, 85, 85, 0.4)' 
    } 
    } 
}; 

     var ctx = document.getElementById("barChart").getContext("2d"); 
     new Chart(ctx, config);