Chartjs 在标签字段中使用数组

Question

我正在使用 Chartjs 制作一个简单的条形图 3.x

我向服务器发出请求以获取 json 数据，然后将其中的某些部分存储到数组中，这是相关代码：

serverData = JSON.parse(http.responseText);
console.log(serverData);

stundenProjekt = serverData.abzurechnen.nachProjekt.map((s) => {
  return s.second.summe;
});

labelsP = serverData.abzurechnen.nachProjekt.map((p) => {
  return p.first;
});

然后我想在图表的数据和标签字段中使用这些数组。我将 stundenProjekt 用作 data 并且它工作正常，但是当我将 labelsP 用作图表的 label 时，它不起作用。这是图表的代码：

const data = {
  labels: labelsP,
  datasets: [{
    label: 'Projekte',
    data: stundenProjekt,
    backgroundColor: [
      '#f4f40b',
    ],
    borderColor: [
      '#B1B101',
    ],
    borderWidth: 3,
  }]
};

  if (barChartProjekt) {
    data.datasets.forEach((ds, i) => {
      barChartProjekt.data.datasets[i].data = ds.data;
      barChartProjekt.labels = newLabelsArray;  
  })
  barChartProjekt.update();
} else {
  barChartProjekt = new Chart(chart, {
    type: 'bar',
    data: data,
    options: {
      responsive: true,
      plugins: {  
        legend: {
          labels: {
            color: "white",
            font: {
              size: 18 
            }
          }
        }
      },
      scales: {
        y: {  
          ticks: {
            color: "white",
            font: {
              size: 18,
            },
            stepSize: 1,
            beginAtZero: true
          }
        },
        x: { 
          ticks: {
            color: "white",  
            font: {
              size: 14
            },
            stepSize: 1,
            beginAtZero: true
          }
        }
      }
    }
  });
}

我找到的唯一解决方法是复制 labelsP 的内容并将它们粘贴到 label 字段中。这些是 labelsP 的内容以及我是如何解决的：

["nexnet-SB-Cloud", "AUTEC - PSK-System²", "Fritzsche", "nexnet-eBalance", "IfT - Neuentwicklung", "wattform", "Migration", "Fahrwerkregelkreis", "bmp greengas", "nexnet-SQL-Abfragen über API", "lambda9", "Nord Stadtwerke", "edifact", "SOLVIT", "BürgerGrünStrom", "SOLVCPM", "lambda captis", "SOLVEDI", "green city power", "max.power"]

const data = {
      labels: ["nexnet-SB-Cloud", "AUTEC - PSK-System²", "Fritzsche", "nexnet-eBalance", "IfT - Neuentwicklung", "wattform", "Migration", "bmp greengas", "Fahrwerkregelkreis", "nexnet-SQL-Abfragen über API", "lambda9", "Nord Stadtwerke", "edifact", "SOLVIT", "BürgerGrünStrom", "SOLVCPM", "lambda captis", "SOLVEDI", "green city power", "max.power"],
      datasets: [{
        label: 'Projekte',
        data: stundenProjekt,
        backgroundColor: [
          '#f4f40b',
        ],
        borderColor: [
          '#B1B101',
        ],
        borderWidth: 3,
      }]
    };

通过这种方式，图表可以正常工作，一切都会按预期显示，但是，我想按照第一段代码所示使用它，因为 labelsP 每隔几秒就会更新一次新数据从服务器中提取。那么，为什么如果我将 labelsP 单独放在 label 字段中它不起作用，但如果我将 labelsP 的内容复制并粘贴到 label领域，它确实有效？

Answer 1

问题是您将 labels 添加到图表配置中的错误位置。

Instead of...

barChartProjekt.labels = newLabelsArray;

try this...

barChartProjekt.data.labels = newLabelsArray;

Chartjs 在标签字段中使用数组

Chartjs using array in label field

javascript

chart.js