ChartistJS Angular2 - 图表仅在调整大小后呈现 window

Question

下午好，

我正在尝试使用 ChartistJS 呈现图表

奇怪的是，如果我调整 window 我的图表数据显示。

这表明我正在渲染包含不完整数据的图表。

目前我正在使用我的 API 服务来获取我的数据。

我发现这个 link 看起来像一个类似的已解决问题，但真的很难实现它。

下面是我的组件

我希望得到你的帮助

谢谢

GWS

chartistJs.component.ts

import { Component, ViewEncapsulation, 
  ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ChartistJsService } from './chartistJs.service';
import { PortfolioReturns } from './returns-interface';
import { BaThemeConfigProvider } from '../../../../theme';

@Component({
  selector: 'chartist-js',
  encapsulation: ViewEncapsulation.None,
  styles: [require('chartist/dist/chartist.css'), require('./chartistJs.scss')],
  template: require('./chartistJs.html'),
  providers: [ ChartistJsService ]  
})

export class ChartistJs {
  
  errorMessage: string;
  returns: PortfolioReturns[];
  arr = [];
  seriesdata = [];
  lablesdata = [];
  isDataAvailable : boolean = true;

  data = {
    simpleLineOptions: {},
    simpleLineData: {}
  };

  constructor( private _chartistJsService: ChartistJsService, 
  private _baConfig: BaThemeConfigProvider,
  private _cdRef: ChangeDetectorRef ) {
  }

  ngOnInit() {     
    this.ChartistChart();
     }

ChartistChart() {

 let chartdata = {
  labels: this.getlablesdata(),
  series: [ this.getseriesdata(),
  ]
};

 this.data = {
    simpleLineOptions: {
      color: this._baConfig.get().colors.defaultText,
      fullWidth: true,
      height: '300px',
      chartPadding: {
        right: 40
      }
    },
    simpleLineData: chartdata
    };
 }

 getseriesdata() {
   this._chartistJsService.getReturns()
            .subscribe((res: PortfolioReturns[]) => {
                this.returns = res;
                for (let i = 0; i < this.returns.length; ++i) {
                   this.seriesdata.push(this.returns[i].logReturnGross.toString());
    }} );
    return this.seriesdata;
  }

 getlablesdata() {
   this._chartistJsService.getReturns()
            .subscribe((res: PortfolioReturns[]) => {
                this.returns = res;
                for (let i = 0; i < this.returns.length; ++i) {
                   this.lablesdata.push(this.returns[i].performanceDate);
                  }} ) ;
    return this.lablesdata;
  }


   getResponsive(padding, offset) {
    return this._chartistJsService.getResponsive(padding, offset);
  }

}

Answer 1

问题在我的Http Get

后被.subscribe解决了

ChartistChart() {
    this._chartistJsService.getReturns()
        .subscribe((res: PortfolioReturns[])  => {
            this.returns = res;
            for (let i = 0; i < this.returns.length; ++i) {
               this.seriesdata.push(this.returns[i].logReturnGross);
               this.lablesdata.push(this.returns[i].performanceDate.toString());
              };
               this.data = {   
                simpleLineOptions: {
                  color: this._baConfig.get().colors.defaultText,
                  fullWidth: true,
                  height: '300px',
                  chartPadding: {
                    right: 40
                  }
                },
                simpleLineData: {
                  labels: this.lablesdata,
                  series: [ this.seriesdata ]
                }
                };
            });
        }

ChartistJS Angular2 - 图表仅在调整大小后呈现 window

ChartistJS Angular2 - chart only rendering after resizing window

rendering

chartist.js

angular