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