obszar wykresu kolor tła chartjs

Question

Mam problem z JS wykresów, chcę kolorowania obszarze wykresu jak powyżej

staram się znaleźć konfigurację z charJs Docs obrazu, ale nie znaleziono niczego. czy można zmienić kolor tła obszaru wykresu? Jeśli to możliwe, ktoś może mi pomóc?

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

Oto mój aktualny kod jsFiddle

więc każdy może spróbować rozwiązanie znajdź. dzięki za pomoc.

Answer 1

Nie ma wbudowanej metody zmiany koloru tła, ale można użyć CSS. JSFiddle.

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

EDIT

Jeśli chcesz wypełnić dokładnie obszar wykresu i bez całej div, możesz napisać własną wtyczkę chart.js. Wypróbuj na 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);