Kendo UI 对于 Angular 饼图不响应 ChangeDetectionStrategy.OnPush

Question

我创建了一个新组件，它应该在我放置该组件的任何地方显示一个饼图，问题是即使是简单的组件，饼图保持第一个渲染的大小，我遇到了这个问题在我将 ChangeDetectionStrategy 更改为 ChangeDetectionStrategy.OnPush 之后，我这样做的问题因为即使没有问题也不会持续存在，但调整大小开始变得迟缓并且在此期间消耗更多 CPU 使用量。

所以我可以选择保持延迟并使图表响应，或者更改 ChangeDetectionStrategy 并让图表卡在第一次渲染。

另外，我有很多类型的图表，比如条形图，但这种图表似乎没有出现问题，目前，它只适用于我的饼图。

my.component.ts:

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.html',
  styleUrls: ['./my-component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent implements OnInit {
  public pieData: { category: string; value: number; active: boolean }[] = [
    {category: 'Complete', value: 123},
    {category: 'Work In Progress', value: 22},
    {category: 'Other', value: 5},
  ];
  constructor(private _cdRef: ChangeDetectorRef) {
  }
}

我的-component.html:

<kendo-chart [seriesColors]="['orange', '#ffe', 'green']">
  <kendo-chart-legend position="top"></kendo-chart-legend>
  <kendo-chart-series>
        <kendo-chart-series-item [type]="'pie'" [data]="pieData" [field]="'value'" [categoryField]="'category'">
</kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

我的-component.scss:

:host {
  display: flex;
  overflow: hidden;
  margin: 8px;
  padding: 8px;
  flex-direction: column;

  @media only screen and (max-width: 760px),
  (min-device-width: 768px) and (max-device-width: 1024px) {
    padding: 2px;
  }
}

Answer 1

如果您的组件带有 changeDetection: ChangeDetectionStrategy.OnPush（这是提高性能的好主意），那么好的解决方案是每次调整 window 大小时触发 markForCheck()，但是使用 debounceTime 这样在调整图表大小之前您将有一些时间等待：

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.html',
  styleUrls: ['./my-component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent implements OnInit {
  constructor(private _cdRef: ChangeDetectorRef) {
  }

  ngOnInit(): void {
    fromEvent(window, 'resize') // get the event observable
      .pipe(debounceTime(200)) // you can change debounceTime to whatever you want
      .subscribe((event) => {
        this._cdRef.markForCheck(); // Here we go
      });
  }
}

由于图表本身似乎是响应式的并且应该在每次 window 更改时重新绘制，所以这样做就可以了。

Kendo UI 对于 Angular 饼图不响应 ChangeDetectionStrategy.OnPush

Kendo UI for Angular Pie Charts is not responsive with ChangeDetectionStrategy.OnPush

typescript

kendo-chart

angular-components

angular

kendo-angular-ui