ChartJS - 無法顯示數組中的所有項目

Question

我對 chartJS 有疑問。 我試圖將數組的所有項目顯示為 label，但圖表只給我 ObjekteName 的最后一個值。 此外，我通過 Ajax 調用從 JSON 文件中獲取數據。 所有數據都是動態的。 這是我的代碼：

function generateChart3() {

  var self = this;
  var jahr = [];
  var objekteName = [];
  var jahrData = [];

  //selected years
  var postedData = {};
  postedData.years = $('#mf123_select_jahr').val();
  //

  //selected objekte
  postedData.ObjekteLFN = $('#mf123_objekte').val();
  //

  $.ajax({
    url: "data/json.dashboard.php?call=chart3",
    dataType: 'json',
    type: 'POST',
    data: postedData,
    success: function(dataGraph3) {

      console.log(dataGraph3);

      for (var i in dataGraph3) {
        var test123 = dataGraph3[i];
      }

      for (var i in dataGraph3) {
        var labelNames = Object.keys(dataGraph3[i]);
        var labelValues = Object.values(dataGraph3[i]);

      }

      for (var i in labelNames) {
        for (var j in postedData.years) {
          if (labelNames[i] == postedData.years[j]) {
            jahr.push(labelNames[i]);
            jahrData.push(1 * labelValues[i]);
          }
        }

      }


      for (var i in labelValues) {
        for (var k in postedData.ObjekteLFN) {
          if (labelValues[i] == postedData.ObjekteLFN[k]) {
            objekteName.push(labelValues[i]);

          }

        }

      }

      var myDatasets = [];
      for (var i in objekteName) {
        myDatasets.push({
          yAxisID: 'leftYaxis',
          label: objekteName,
          borderWidth: 1,
          data: jahrData,
          borderColor: "#89BEB3",
          backgroundColor: "#89BEB3",
          borderWidth: 3,
          fill: false
        });

      }


      //data
      var myChart2Data = {
        labels: jahr,
        datasets: myDatasets
      };


      var config2 = {
        type: 'bar',
        data: myChart2Data,
        options: {
          plugins: {
            datalabels: {
              display: 'auto',
              anchor: 'end',
              color: '#625261',
              rotation: -90,
              align: 'start',
              clamp: true,
              clip: true,
              labels: {
                title: {
                  font: {
                    weight: 'bold'

                  }

                }
              },
              formatter: function(value) {
                if (parseInt(value) >= 1000) {
                  return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") + ' €';
                } else {
                  return value + ' €';
                }
              }

            }
          },
          maintainAspectRatio: true,
          responsive: true,
          tooltips: {
            callbacks: {
              label: function(tooltipItem, data) {
                var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                if (parseInt(value) >= 1000) {
                  return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") + ' €';
                } else {
                  return value + ' €';
                }

              }
            },
            displayColors: false,
            titleFontSize: 16,
            titleAlign: 'center',
            cornerRadius: 12,
            titleFontColor: '#ffffff',
            bodyFontSize: 14
          }

          ,
          scales: {
            yAxes: [{
                id: 'leftYaxis',
                position: 'left',
                display: true,
                ticks: {
                  fontColor: "rgba(0,0,0,1",
                  fontStyle: "bold",
                  beginAtZero: false,
                  padding: 10,
                  callback: function(value) {
                    if (parseInt(value) >= 1000) {
                      return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") + ' €';
                    } else {
                      return value + ' €';
                    }

                  },
                },
                gridLines: {
                  drawTicks: false,
                  display: true
                }


              }]

              ,
            xAxes: [{
              display: true,
              scaleLabel: {
                display: true,
                LabelString: ''
              },
              gridLines: {
                zeroLineColor: "transparent",
                display: false
              },
              ticks: {
                padding: 10,
                fontColor: "rgba(0,0,0,1)",
                fontStyle: "bold"
              }
            }]
          }

          ,
          legend: {
            labels: {
              fontColor: "black",
              fontSize: 15,
              boxWidth: 20,
              fontStyle: 'strong'
            },
            position: 'bottom',
            align: 'start',
            display: true,
            align: 'left'
          }

          ,
          title: {
            display: true,
            maintainAspectRatio: true
          },
          chartArea: {
            backgroundColor: '#ffffff'
          }
        }
      }



      //draw chart3
      var ctx2 = document.getElementById('graph3').getContext('2d');
      chart3 = new Chart(ctx2, config2);
    }
  });
}
}

無論我選擇哪一年，這段代碼都會給我這張圖表。

我想將 objekteName 的所有項目顯示為單獨的標簽，如下圖所示。

有人有想法嗎？

另外，您可以在下面看到來自 sql 服務器的圖像。 我還有其他要顯示的記錄。 到目前為止，它只顯示最后一條記錄，如您在紅色方塊中所見。

Answer 1

好像您是在每個 for 循環中設置值，而不是將它們添加到數組中。 即將到來的 for 循環不會像您預期的那樣循環，因為它只包含一項。

var labelNames = [];
var labelValues = [];
for (var i in dataGraph3) {
        labelNames.push(Object.keys(dataGraph3[i]));
        labelValues.push(Object.values(dataGraph3[i]));
      }