Grafik alanı arka plan rengi chartjs

Question

Ben grafik js ile sorun var, ben ben charJs Docs gelen yapılandırmayı bulmaya

yukarıdaki resim gibi boyama grafik alanında istiyoruz, ama hiçbir şey eşleşti. Grafik alanı arka plan rengini değiştirmek mümkün mü yoksa değişmiyor mu? Mümkünse, herkes bana yardım edebilir mi?

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

İşte

böylece herkes bulmak çözümü için deneyebilirsiniz benim geçerli kod jsFiddle bu. Yardımlarınız için teşekkürler.

Answer 1

Arka plan rengini değiştirmek için yerleşik bir yöntem yoktur, ancak CSS'yi kullanabilirsiniz. JSFiddle. Grafikte ve hiçbir bütün div kesin alanını doldurmak istiyorsanız

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

DÜZENLEME

, kendi chart.js eklenti yazabilirsiniz. JSFiddle'da deneyin. sizin için

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