NGX-charts气泡图如何重新加载显示的数据

Question

我有一个来自 ngx-charts 的气泡图（将其用作散点图但无论如何）。 HTML 的设置使得当用户单击页面的元素时，图表的内容会根据 updateTitleData() 函数发生变化。然而，在测试中，当我单击元素时，scatterData 数组的数据会发生变化，但这不会改变实际显示的图表。所以我的问题是如何让图表在运行.

时动态重新加载

我在网上阅读了一些相关内容，有人说您需要更改实际的 scatterData 数组，而不仅仅是我通过创建数组值尝试的 "series" 元素在包含整个数组的 updateTitleData 中，然后在函数末尾执行 this.scatterData=newData;，这再次正确设置了数据，但仍然没有导致图表更新。

我还读到你需要在 html 代码中放置一个 [update$]="update$" 然后在打字稿代码中定义图表变量时使用 update$: Subject<any> = new Subject(); 然后定义函数 updateChart(){ this.update$.next(true); } 这样您就可以在需要更新图表时调用 updateChart() 。我试过了，但是由于 [update$]="update$" 元素包含在其构造函数中，它只会在最初加载时抛出错误。

public scatterData = [{
     "name" : "LQArray",
     "series" : [{
         "name" : "a",
         "x" : 1,
         "y" : 2,
         "r" : 1
     }]
 }];

 private updateTitleData() {    
     if(this.regionData && this.regionData.location_quotient){
         this.scatterData["series"] = [];
         this.jobTitles.forEach((value) => {
             var newScatterData = [{
                 "name":value,
                 "x":parseFloat(this.regionData.x_axis[value]),
                 "y":parseInt(this.regionData.y_axis[value]),
                 "r":1
             }];
                  this.scatterData["series"].push(newScatterData);
         });
     }
}

这是有问题的代码。该图表确实显示了在开头定义的 "a" 元素，但应在单击该元素后立即将其删除并替换。

Answer 1

我明白了。我错误地填充了 "series" 元素。

我拥有的：

this.jobTitles.forEach((value) => {
     var newScatterData = [{
        "name":value                 
        "x":parseFloat(this.regionData.x_axis[value]),
        "y":parseInt(this.regionData.y_axis[value]),
        "r":1
    }];
         this.scatterData["series"].push(newScatterData);
});

我需要的：

this.jobTitles.forEach((value) => {
     var newScatterData = {
        "name":value                 
        "x":parseFloat(this.regionData.x_axis[value]),
        "y":parseInt(this.regionData.y_axis[value]),
        "r":1
    };
         this.scatterData[0]["series"].push(newScatterData);
});
this.scatterData=[...this.scatterData];

基本上需要 ["series"] 前面的 [0] 并且需要从 newScatterData 中删除数组元素。

NGX-charts气泡图如何重新加载显示的数据

NGX-charts bubble chart how to reload displayed data

javascript

angular

typescript

ngx-charts