ChartJS 堆疊條形圖未顯示為堆疊

Question

我正在嘗試將條形圖顯示為堆疊，但無法使其正常工作，而且我不確定哪里出錯了...

我已連接到我的 Oracle 表，查詢結果如下...

Area | A  | B
Red  | 38 | 49
Blue | 31 | 38

我的圖表目前看起來像這樣

在我的圖表中，我有以下內容......

  $(document).ready(function(){
  $.ajax({
  url: "getPiData.php",
  method: "POST",
  success: function(data) {
    console.log(data);
    var CustomerModel = [];
    var DaysOut = [];
    for(var i in data) {
      DaysOut.push(data[i].A);
      DaysOut.push(data[i].B);
      CustomerModel.push("AREA");

    }
    $('#myChart3').remove();
    $('#barChartPi').append('<canvas id="myChart3"></canvas>');
    var chartdata = {
      labels: DaysOut,
      datasets : [
        {
          label:'Total Jobs' ,
          backgroundColor: "#22aa99",
          borderColor: "#22aa99",
          hoverBackgroundColor: "#22aa99",
          hoverBorderColor: "#22aa99",
          data: DaysOut
        },
      ]
    };
    var ctx = $("#myChart3");
    var barGraph = new Chart(ctx, {
      type: 'bar',
      data: chartdata,
      options: {
        legend: {
          display: false
       },
      scales: {
          xAxes: [{
            stacked: true,
          }],
          yAxes: [{
            stacked: true,
          }]
      },
    }
    });
  },
  //error: function(data) {
    //console.log(data);
  }
});
});

編輯：

對圖表進行了以下更改...

    //console.log(data);
    var CustomerModel = [];
    var DaysOut_A = [];
    var DaysOut_B = [];
    for(var i in data) {
      // Set chart labels
      chartLabels = ['Week1', 'Week2','Week3','Week4', 'Week5']
      // Store data in separate array
      DaysOut_A.push(data[i].A);
      DaysOut_B.push(data[i].B);
    }
    $('#myChart1').remove();
    $('#piechartReason').append('<canvas id="myChart1"></canvas>');
    var chartdata = {
      labels: chartLabels,
      datasets : [
      {
        label:'Total Jobs A' ,   // Label for 1st Dataset
        backgroundColor: "#22aa99",
        borderColor: "#22aa99",
        hoverBackgroundColor: "#22aa99",
        hoverBorderColor: "#22aa99",
        data: DaysOut_A            // Data for 1st Dataset
      },{
        label:'Total Jobs B',      // Label for 2nd Dataset
        backgroundColor: "#aa2222",
        borderColor: "#aa2222",
        hoverBackgroundColor: "#aa2222",
        hoverBorderColor: "#aa2222",
        data: DaysOut_B           // Data for 2nd Dataset
      }
    ]
  };

編輯

從控制台添加數組結果

1. 0：{區域：“紅色”，A：“49”，B：“49”，...}
2. 1：{區域：“藍色”，A：“38”，B：“35”，...}

Answer 1

這樣做的原因是因為您只有一個數據集，因此 chart.js 沿 x 軸顯示所有內容。 要創建堆疊條形圖，您需要使用多個數據集。 為此，您必須單獨存儲數據：

// Set chart labels
chartLabels = ['Red', 'Blue']
// Store data in separate array
DaysOut_A.push(data[i].A);
DaysOut_B.push(data[i].B);

然后為每個創建單獨的數據集：

var chartdata = {
  labels: chartLabels,         // Label for entire chart
  datasets : [
    {
      label:'Total Jobs A' ,   // Label for 1st Dataset
      backgroundColor: "#22aa99",
      borderColor: "#22aa99",
      hoverBackgroundColor: "#22aa99",
      hoverBorderColor: "#22aa99",
      data: DaysOut_A            // Data for 1st Dataset
    },{
      label:'Total Jobs B',      // Label for 2nd Dataset
      backgroundColor: "#aa2222",
      borderColor: "#aa2222",
      hoverBackgroundColor: "#aa2222",
      hoverBorderColor: "#aa2222",
      data: DaysOut_B           // Data for 2nd Dataset
    }
  ]
};