Angular 2：如何将我的 API 数据传递给图表并用数据显示图表

Question

我是 Angular2/4/5 的新手，提前致谢

我的 API 数据格式如下：

{
  "temp":49.47,
  "time":"05:17:55 PM"
}

我需要从上面的格式中获取数据并将数据传递到 chart.js

我有一个 ServerService 正在从我的 API

中获取数据

@Injectable()
export class ServerService {
    private basicUrl ='http://10.188.16.104:8001/ws/temp';
dataSource;

    constructor(private http: Http) { } 

  getServers(): Observable<any> {
    return this.http.get(this.basicUrl)
.subscribe(data =>this.dataSource =data);
    }
}

来自我的组件代码：

更新代码：

    export class DrawgraphComponent implements OnInit {
  id = 'chart1';
    width = 600;
    height = 400;
    type = 'line';
    dataFormat = 'json';
  dataSource;
  mydata; 
  dataSourceObservable :Observable<any> 
  constructor(private http: HttpClient,private service: ServerService) {      
    this.dataSourceObservable  = this.service.getServers()
  .map(response => response.json()).subscribe(
   (dataFromApi) => {
      this.mydata = {
        "chart": {
            "caption": "EASi's RTD-SIM",
            "subCaption": "Tempature vs Time",
            "numberprefix": "C",
            "theme": "fint"
         },
        "data": dataFromApi
       } 
   });


}

ngOnInit(): void {  }
}

和HTML代码是

<div *ngIf=getGraphClicked>
            <fusioncharts
              [id]="id"
              [width]="width"
              [height]="height"
              [type]="type"
              [dataFormat]="dataFormat"
              [dataSource]="mydata">
            </fusioncharts>      
          </div>

任何人都可以帮助我使用 API 数据绘制图表。

Answer 1

你可以使用异步管道

dataSourceObservable :Observable<any>

constructor(private serverService: ServerService) { 
 this.dataSourceObservable  = this.serverService.getServers()
  .map(response => response.json());  
}

...

 <div *ngIf=getGraphClicked>
        <fusioncharts
          [id]="id"
          [width]="width"
          [height]="height"
          [type]="type"
          [dataFormat]="dataFormat"
          [dataSource]="dataSourceObservable | async">
        </fusioncharts>      
      </div>

Angular 2：如何将我的 API 数据传递给图表并用数据显示图表

Angular 2: How to pass my API data to graph and Display the Graph with data

angular

chart.js

angular5

angular2-services

fusioncharts