0

下午好，

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

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

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

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

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

在此处输入链接描述

下面是我的组件

我很想在这里得到你的帮助

谢谢

全球气象站

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 回答