vùng Chart màu nền chartjs

Question

Tôi có vấn đề với js biểu đồ, tôi muốn đến khu vực biểu đồ màu như hình trên

tôi cố gắng để tìm cấu hình từ charJs Docs, nhưng không phù hợp. có thể hoặc không thay đổi màu nền của vùng biểu đồ? nếu có thể, ai cũng có thể giúp tôi?

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

Đây là mã hiện tại của tôi jsFiddle

để mọi người có thể thử cho giải pháp tìm. cảm ơn sự giúp đỡ của bạn.

Answer 1

Không có phương pháp tích hợp để thay đổi màu nền, nhưng bạn có thể sử dụng CSS. JSFiddle.

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

EDIT

Nếu bạn muốn điền vào khu vực chính xác của bảng xếp hạng và không có cả div, bạn có thể viết chart.js Plugin của riêng bạn. Hãy thử nó trên 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);