1

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

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

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

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

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

1 回答 1

0

如果您有组件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
      });
  }
}

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

于 2018-11-14T12:44:13.663 回答