Ошибка при использовании функции stockChart () Highcharts (> = 8.0.1) в Angular - PullRequest
Новая
       45

Ошибка при использовании функции stockChart () Highcharts (> = 8.0.1) в Angular

1 голос
/ 06 августа 2020

Когда я использую функцию Highcharts.stockChart, импортированную из highcharts/highstock, я получал следующие ошибки (при нажатии):

highstock.src.js:3417 Error: <rect> attribute width: Expected length, "NaN". и highstock.src.js:3417 Error: <rect> attribute x: Expected length, "NaN".

Если я использую highcharts версии 8.0.0 (или 7.1.2), я не получаю никаких ошибок.

Сначала я думал, что эти ошибки были вызваны моим набором данных, поэтому Я продолжаю издеваться над ним, но это не сработало. Затем я попытался издеваться над «опциями» объекта, переданными в функцию Highcharts.stockChart(domElement, options), но опять же, это не сработало. Даже чистый вызов этой функции не работает: Highcharts.stockChart(domElement, {})

Stackblitz: https://stackblitz.com/edit/angular-playground-qdw6ll (файл tds-chart.component.ts - посмотрите на Chrome консоль DevTools, чтобы увидеть сообщения об ошибках)

Это код моего компонента (проверьте функцию updateOrCreateChart): 

import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  ElementRef,
  Input,
  NgZone,
  OnDestroy,
  OnInit
} from '@angular/core';
import { Chart, Options } from 'highcharts';
import { BehaviorSubject, Subscription } from 'rxjs';
import * as Highcharts from 'highcharts/highstock';

@Component({
  selector: 'tds-chart',
  template: '<div id="myDiv"></div>',
  exportAs: 'tdsChart',
  changeDetection: ChangeDetectionStrategy.OnPush
})
// tslint:disable-next-line: component-class-suffix
export class TdsChart implements OnDestroy, OnInit {
  private _options$ = new BehaviorSubject<Options>(null);
  private _sub: Subscription;
  private _chart: Chart;

  @Input() constructorType: string;
  @Input() oneToOne = false;
  @Input() runOutsideAngular = true;
  @Input() callbackFunction: (chart: Chart) => void;

  @Input() set options(val: Options) {
    this._options$.next(val);
  }

  get chart() {
    return this._chart;
  }

  constructor(
    private el: ElementRef,
    private _zone: NgZone,
    private _cd: ChangeDetectorRef
  ) { }

  ngOnInit() {
    this._sub = this._options$.subscribe(() => this.wrappedUpdateOrCreateChart());
  }

  redraw() {
    this._options$.next(this._options$.value);
  }

  private wrappedUpdateOrCreateChart() {
    if (this.runOutsideAngular) {
      this._zone.runOutsideAngular(() => {
        setTimeout(() => {
          this.updateOrCreateChart();
          this._cd.markForCheck();
        }, 1);
      });
    } else {
      setTimeout(() => {
        this.updateOrCreateChart();
        this._cd.markForCheck();
      }, 1);
    }
  }

  private updateOrCreateChart() {
    if (this._chart) {
      // to do 
    } else {
      this._chart = Highcharts.stockChart('myDiv', {}, null);
    }
  }

  ngOnDestroy() {
    if (this._sub) {
      this._sub.unsubscribe();
    }
    if (this._chart) {
      this._chart.destroy();
      this._chart = null;
    }
  }
}

1 Ответ

1 голос
/ 06 августа 2020

Существует проблема, открытая на highcharts по поводу этой ошибки.

В этой проблеме сообщается об обходном пути для версий 8.0.1 + .

Демо: http://jsfiddle.net/BlackLabel/74m9sf8c/

(function(H) {
  H.wrap(
    H.Navigator.prototype,
    'drawMasks',
    function(proceed, zoomedMin, zoomedMax) {
      if (!H.isNumber(zoomedMin) || !H.isNumber(zoomedMax)) {
        return;
      }
      proceed.apply(this, Array.prototype.slice.call(arguments, 1))
    }
  );
})(Highcharts);
...