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

Question

vue 3 Chartjs 没有从 API 动态渲染数据

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

这是我的 JSON 数据来自 API

[{"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 function 时检查它是否存在。

阅读更新图表

像这样的东西：

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