0

こんにちは、

ChartistJS を使用してチャートをレンダリングしようとしています

奇妙なことに、ウィンドウのサイズを変更すると、チャート データが表示されます。

これは、不完全なデータでチャートをレンダリングしていることを示唆しています。

現在、API サービスを使用してデータを取得しています。

同様に解決された問題のように見えるこのリンクを見つけましたが、実際に実装するのに苦労しています。

ここにリンクの説明を入力

以下は私のコンポーネントです

ここであなたの助けをお願いします

ありがとう

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

}

4

1 に答える 1

0

問題は、私の 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 ]
                }
                };
            });
        }
于 2016-10-27T06:02:03.150 に答える