Kendo Angular UI 更新后仪表会自行调整大小

Question

我正在使用 Kendo UI 中的 RedialGauge 和 angular。

我每 3 分钟从 api 以 rxjs 动态加载我的仪表数据，这是我的代码：

interval(2e5)
   .pipe(
      startWith(() => forkJoin(
          this.service.getStatistics(),
          this.service.otherCall()
        )
      ),
      switchMap(() => forkJoin(
          this.service.getStatistics(),
          this.service.otherCall()
        )
      ),
      retryWhen((err) => err.pipe(
          take(3)
        )
      )
   ).subscribe(([statistics, others]) => {
      this.statistics = statistics;
      ...
   });

初始化加载后一切正常，仪表看起来像他们应该的

但在下一次更新后，仪表会随机调整它们的大小

Answer 1

CSS 可能是这里的问题。下面给出一个例子

 #gauge-container {
            border-style:solid;
            border-color:red; 
            background:  transparent url(@Url.Content("~/images/gauge-container-partial.png"));
            background-vertical-position: -500% ;
            background-size: 100% 100%;
            width: auto;
            height: 100%;
            text-align: center;
            margin: -10% auto auto auto;
        }

        #SMDRReceiverMonitorChart {
            border-style:solid;
            border-color:blue; 
            width: auto;
            height: auto;
            align: center;
            margin: auto auto auto auto;

            border-color: transparent;
        }

        #gauge-container .k-slider {
           margin-top: -11px;
            width: 140px;

        }

编辑

注意：这只是一个例子。请调试并尝试相应地更改 css。

Answer 2

这就是我想出的结果，虽然有点老套，但这是唯一真正有效的解决方案。

当我想更新仪表时，我基本上会重新加载组件。

public refreshComponent(): void {
   const url = this.router.url;
   this.router.navigateByUrl('/app', {skipLocationChange: true}).then(() => {
      this.router.navigate([url]);
   });
}

Answer 3

我建议你用 div.

包围你的径向仪表

在你的 div 中你使用了 ngIf。

在您的 ngAfterViewInit() 中设置值为 true

类似的东西：

        <div *ngIf="isLoaded">
          <kendo-radialgauge class="kendoChart" [pointer]="[{ value: value }]">
            <kendo-radialgauge-scale [startAngle]="startAngle" [endAngle]="endAngle">            
            </kendo-radialgauge-scale>
          </kendo-radialgauge>
        </div>

  public ngAfterViewInit(): void {
      this.isLoaded = true;
  }

Kendo Angular UI 更新后仪表会自行调整大小

Kendo Angular UI Gauges resize themself after update

kendo-ui

angular