vue 3 chart.js 数据从 api 更新但图表未呈现

Question

vue 3 Chartjs 不会从 API 动态呈现数据

目前，我正在开发 vue 3，而且我是新手。我从官方 chartjs 文档中添加了一个图表 我从 API 添加了图表的数据字段，它工作正常，一切都在呈现，但是每当我尝试将相同的数据字段更新到另一个字段时，它不会呈现图表，但是图表正在接收数据但没有呈现

这是我来自 API 的 JSON 数据

[{"ward":1,"maleCount":3,"femaleCount":1,"otherCount":1,"disableCount":0}, 
{"ward":2,"maleCount":0,"femaleCount":0,"otherCount":0,"disableCount":0}, 
{"ward":3,"maleCount":0,"femaleCount":0,"otherCount":0,"disableCount":0}, 
{"ward":4,"maleCount":0,"femaleCount":0,"otherCount":0,"disableCount":0},

这就是我调用我的 api 的方式

 mounted() {
    this.getData();
  },

method:{
getData() {
      axios
        .get("api/v1/household/dashboard/getDetailByGharMuli")
        .then((res) => {
          this.data = res.data;
          this.wardCount = this.data.length;
          console.log(this.wardCount);
          let i = 0;
          let j = 0;
          for (i = 0; i < this.data.length; i++) {
            this.mdata.push(this.data[i].maleCount);
            this.Fdata.push(this.data[i].femaleCount);
            this.Odata.push(this.data[i].otherCount);
          }
          for (j = 1; j <= this.wardCount; j++) {
            this.llabels.push("Ward" + j);
          }
          this.barChart();
        })
        .catch((err) => {
          console.error(err);
        });
    },
barChart() {
      var Chart = require("chart.js");
      new Chart(document.getElementById("bar-chart-grouped"), {
        type: "bar",
        data: {
          labels: this.llabels,
          datasets: [
            {
              label: "पुरुष जनसंख्या",
              backgroundColor: "rgba(0, 143, 251, 0.8)",
              data: this.mdata,
            },
           {
              label: "महिला जनसंख्या",
              backgroundColor: "rgba(0, 227, 150, 0.8)",
              data: this.Fdata,
            },
            {
              label: "पअन्य जनसंख्या",
              backgroundColor: "rgb(255, 69, 96,0.8)",
              data: this.Odata,
            },
          ],
        },
      });
    },
}

我想根据 Ward 1 从上面的 JSON 数据中更新数据 但每当我从 API 更新数据时， 图表正在接收数据但未呈现数据

setDataBywardID(data) {
      axios
        .get("api/v1/household/dashboard/getGenderCountAccordingToWard/" + data)
        .then((res) => {
          this.wardData = res.data;
          console.log(this.wardData);
          this.llabels = "total population";
          this.mdata = this.wardData.maleCount;
          console.log(this.mdata);
          this.Fdata = this.wardData.femaleCount;
          console.log(this.Fdata);
          this.Odata = this.wardData.otherCount;
          this.barChart();
        })
        .catch((err) => {
          console.log(err);
        });
    },

Answer 1

通常当您尝试更新图表时，您不会每次都调用new Chart。

您应该在创建图表时保存它（将chart: null添加到data），然后您可以在调用barChart函数时检查它是否存在。

阅读Updating Charts

类似这样的：

barChart() {
    var Chart = require("chart.js");
    var options = {
        type: "bar",
        data: {
            labels: this.llabels,
            datasets: [
            {
                label: "पुरुष जनसंख्या",
                backgroundColor: "rgba(0, 143, 251, 0.8)",
                data: this.mdata,
            },
            {
                label: "महिला जनसंख्या",
                backgroundColor: "rgba(0, 227, 150, 0.8)",
                data: this.Fdata,
            },
            {
                label: "पअन्य जनसंख्या",
                backgroundColor: "rgb(255, 69, 96,0.8)",
                data: this.Odata,
            }]
        }
    };

    if(!chart)
        this.chart = new Chart(document.getElementById("bar-chart-grouped"), options);
    else
    {
        this.chart.options = options;
        this.chart.update();
    }
}