Question

下午好，

我尝试使用ChartistJS渲染图表

奇怪的是，如果我调整窗口大小，我的图表数据会显示出来。

这表明我使用不完整的数据呈现图表。

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

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

enter link description here

以下是我的组件

我很乐意帮助你

由于

GWS

chartistJs.component.ts

＆＃13;

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

＆＃13;

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 - 仅在调整窗口大小后呈现图表

1 个答案: