VUE 3chart.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() {
    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();
    }
}