Question

我的Angular spring boot应用程序中有2个图表，第一个工作得很好。每次图表重新加载不同的数据集时，我都有不同的数据集。每次切换到下一个数据集时，图表都会出现问题，并且将光标悬停在值上会更改为旧值，但我使用

进行了修复

this.chartdef.destroy();
this.reloadchart();

对于第一个图表来说，它就像我说的那样很好。

我试图为第二张图表做同样的事情，但是每次我打电话时这些方法图表会完全消失

这是我的代码

 constructor(private produitservice:ProduitService) {

    this.interval = setInterval(() => {
      // this.pushdata();
      this.prodname=this.produitlist[this.pointer];
      console.log(this.prodname);
      this.produitservice.getdisPoste().subscribe(data2=>{
        this.poste=data2;
        this.poste.forEach(post=>{
          this.produitservice.gettopdefaut(this.produitlist[this.pointer],post,this.datelist[this.pointerdate]).subscribe(top=>{
            this.def=top;
            this.def.forEach(tt=>{
              this.defaut=tt;
              if (this.i==0){this.top1.push(this.defaut.nb_def);}
              else if(this.i==1){ this.top2.push(this.defaut.nb_def);}
              else if(this.i==2){this.top3.push(this.defaut.nb_def);}
              if(this.i==2){this.i=0;}else this.i++;
//console.log(i);

            });
        /*    console.log(this.top1+" top1 "+post);
            console.log(this.top2+" top2 "+post);
            console.log(this.top3+" top3 "+post);*/
             //if(this.chartdef) this.chartdef.destroy();
            this.chartdef.destroy();
            this.reloadchart();
            //this.defaut=top;
            // top.foreach(def=>{this.defaut=def;console.log(this.defaut.nb_def);});
            // console.log(this.defaut);
          })})
      });
      this.top3=[];
      this.top2=[];
      this.top1=[];
      this.poste=[];
      this.pointer++;

      if (this.pointer == this.produitlist.length) { this.pointer = 0 }

      //this.reloadchart();
    }, 10000);
}

reloadchart() {
    // @ts-ignore
    this.chartdef= new Chart('defauts',
      {
        type:'bar',

        options:{
          cutoutPercentage:40,
          responsive :true,

          title:{
            display:true,
            text:'Top 3 générateurs des défauts',

          },
          plugins:{
            datalabels:{
              align: 'end',
              anchor: 'end',
              display: 'true',
              color:'#ffffff',
              textAlign:'center',
              formatter: function(value, context) {
                return context.dataset.label+'\n'+ value;
              }
            }
          },
                  },
        data:{
          labels:this.poste,
          datasets:[
            {
              label:'REPERTOP01',
              data:this.top1,
              backgroundColor:'rgba(255, 0, 0,1)',
              borderColor:'rgba(255, 0, 0,0.6)',
              borderWidth:1,
              fill:false,
            },
            {
              label:'REPERTOP02',
              data:this.top2,
              backgroundColor:'rgba(255, 102, 0,1)',
              borderColor:'rgba(255, 102, 0,0.6)',
              fill:false,
              borderWidth:1,
            },
            {
              label:'REPERTOP02',
              data:this.top3,
              backgroundColor:'rgba(255, 225, 0,1)',
              borderColor:'rgba(255, 225, 0,0.6)',
              fill:false,
              borderWidth:1
            }
          ],
        }
      });
  }

我正在使用带有angular7的chartJs-如何解决此问题？

销毁图表后消失，然后重新加载

0 个答案: