时间戳

首页 > 解决方案 > PrimeNG饼图随机显示，分辨率变化显示

angular - PrimeNG饼图随机显示，分辨率变化显示

问题描述

我正在使用带有来自后端的动态数据的primeng饼图。当我使用静态数据时，饼图按预期工作，但现在与动态数据集成后，它会在页面刷新时随机显示。它根据屏幕分辨率（即宽度和高度）的变化进行渲染和显示。尝试了多种方法，例如 ViewChild、响应性和设置图表的高度和宽度，但似乎都没有奏效。

默认图表

在开发控制台中单击切换设备工具栏并取消单击后的图表

标签： angularchartschart.jsprimeng

解决方案

我记得遇到过类似的问题。它与变化检测有关。屏幕分辨率变化触发变化检测。如果您在任何地方都有针对此事件的处理程序，那么还有一些事件，例如鼠标移动。

考虑到我没有看到代码，我想可能有两种解决方案：

  • 可以在不使用数据更改对变量的引用的情况下完成数据绑定。例如使用 push 方法更新数据源。
// 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];
  });
});

推荐阅读