ChartJS - 无法显示数组中的所有项目

Question

I have an issue with chartJS. I'm trying to display all the items of the array as label but the chart gives me only the last value of the ObjekteName. Also, I take the data from a JSON file with Ajax call. All the data are dynamic. Here is my code:

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

This code gives me this chart whatever year I choose.

I want to display all the items of the objekteName as separate labels like the picture below.

Does anybody has an idea?

Plus, below you can see the image from the sql server. I have also others records I want to display. Until now, it shows only the last record as you can see in the red square.

Answer 1

Seems like you are setting the values in each for loop, instead of adding them to a array. The upcoming for loops won't loop like you expect since it only contains one item.

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