Angular 饼图的 Kendo UI 对 ChangeDetectionStrategy.OnPush 没有响应答案

【问题标题】：Kendo UI for Angular Pie Charts is not responsive with ChangeDetectionStrategy.OnPushAngular 饼图的 Kendo UI 对 ChangeDetectionStrategy.OnPush 没有响应
【发布时间】：2019-04-17 10:32:37
【问题描述】：

我创建了一个新组件，它应该在我放置该组件的任何地方显示一个饼图，即使是简单的组件，问题也是如此，饼图保持第一次渲染的大小，我在我之后遇到了这个问题将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) {
  }
}

我的组件.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>

my-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;
  }
}

【问题讨论】：

饼图的大小似乎在这里正确调整了：stackblitz.com/edit/angular-jd47bi?file=app%2Fapp.component.ts 除了 OnPush 策略还有什么具体的吗？
@SiliconSoul 好吧，仅此而已，我在一些具有 flex 布局的容器中使用此图表，但这些容器运行良好，我的意思是它们已调整大小，所以我不确定这是否是问题所在，该图表也在 Ionic 应用程序中。但对于组件本身，一无所获。
一旦我可以访问代码，我将尝试提供容器模板。
我来到这里是为了覆盖系列颜色的 scss 变量。在这里定义 docs.telerik.com/kendo-ui/styles-and-layout/sass-themes，比如 $series-a 等等，但它没有用。 [seriesColors]="['orange', '#ffe', 'green']" 非常适合我

标签： angular typescript angular-components kendo-chart kendo-angular-ui

【解决方案1】：

如果您的组件带有changeDetection: ChangeDetectionStrategy.OnPush（这是提高性能的好主意），那么好的解决方案是在每次调整窗口大小时触发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
      });
  }
}

由于图表本身似乎是响应式的，并且应该在每次窗口更改时重新绘制，这将起到作用。

【讨论】：