Chart Bereich Hintergrundfarbe chartjs

Question

Ich habe Problem mit Grafik js, möchte ich Färbung Diagrammbereich wie Bild oben

Ich versuche Konfiguration von charJs Docs zu finden, aber nichts gefunden. ist es möglich oder nicht chart area background color zu ändern? wenn möglich kann mir jemand helfen?

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

Hier ist meine aktuellen Code jsFiddle

so kann jeder für find Lösung versuchen. danke für Ihre Hilfe.

Answer 1

Es gibt keine integrierte Methode zum Ändern der Hintergrundfarbe, aber Sie können CSS verwenden. JSFiddle.

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

EDIT

Wenn Sie genauen Bereich der Grafik und keine ganzen div füllen möchten, können Sie Ihre eigene chart.js Plugin schreiben. Versuchen Sie es auf 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);