我使用原始饼图和来自后端的动态数据。当我使用静态数据时,饼图按预期工作,但现在与动态数据集成后,它在页面刷新时随机显示。它会在屏幕分辨率(即宽度和高度)发生变化时进行渲染和显示。我尝试了多种方法,如ViewChild,响应性和设置图表的高度和宽度,但似乎都不起作用。
chart after I clicked toggle device toolbar in dev console and un-clicked it
发布于 2020-08-21 15:30:18
我记得曾经遇到过类似的问题。它与变化检测相关。屏幕分辨率的改变触发了改变检测。还有一些事件,比如鼠标移动,如果你在任何地方有一些处理这些事件的处理程序的话。
考虑到我没有看到代码,我想可能有两种解决方案:
// this is not recognized by the change detection mechanism as update because the reference to this.data is not updated
this.resourceService.getResources().subscribe( data => {
var counts1 = {};
this.chartHistory.forEach((x) => {
counts1[x] = (counts1[x] || 0)+1;
});
for (let i = 0; i < Object.keys(counts1).length; i++) {
this.chartHistoryData.push(Object.keys(counts1)[i]);
this.chartHistoryVal.push(Object.values(counts1)[i]);
}
});
// this would be recognized
this.resourceService.getResources().subscribe( data => {
var counts1 = {};
this.chartHistory.forEach((x) => {
counts1[x] = (counts1[x] || 0)+1;
});
Object.entries(counts1).forEach(([key, value]) => {
this.chartHistoryData = [...this.chartHistoryData, key];
this.chartHistoryVal = [...this.chartHistoryVal, value];
});
});https://stackoverflow.com/questions/63517675
复制相似问题