Angular2-highcharts在Angular 4項目中的可觀察性

我想創建一個圖表，使用來自http請求的observables工作，下面的代碼正在處理一些假數據，我只想用來自後端的真實數據替換它們末端腳本這裏是我的代碼：Angular2-highcharts在Angular 4項目中的可觀察性

我app.ts：

export class MyVerticalchartComponent { 


    @Input() showMePartially: boolean; 

    options: Object; 

    constructor(public userService3: UserService3) { 

     this.options = { 
     title : { text : '' }, 
     chart: { type: 'area' }, 
     legend: { enabled: false }, 
     credits: { enabled: false }, 
     xAxis: { type: 'datetime', 
       // startOnTick: true, 
       // endOnTick: true, 
       // tickInterval: 24 * 3600 * 1000, 
      }, 
        dateTimeLabelFormats: { 
      second: '%H:%M:%S', 
      minute: '%H:%M:%S', 
      hour: '%H:%M:%S', 
      day: '%H:%M:%S', 
      week: '%H:%M:%S', 
      month: '%H:%M:%S', 
      year: '%H:%M:%S' 
     }, 
     yAxis: { min: 0, 
      max: 100 }, 
     plotOptions: { 
      series: { 
      // pointStart: 0, 
       color: '#648e59', 
       fillOpacity: 0.8, 
       fillColor: '#648e59' 
        } 
     }, 
     series: [{ 
      name: 'Someone1', 
      data: [], // res.json 
     }] 
    }; 
    } 

     public ngOnInit() { 
     this.userService3.getData().subscribe((data) => { 
     this.options.series[0].data.operating_details = data; 
     console.log(data); 
    });

}}

我app.html：

<chart [options]="options"> 
     <series> 
    </series> 
    </chart>

個

我的HTTP service.ts：

export interface User3 { 
data: any; 
} 
const usersURL = 'http://my.super.backend.script.com';

@Injectable（）出口類UserService3 {

users3：可觀察;

constructor (public http: Http) { 

     getData() { 

const tick3$ = Observable.timer(100, 60000); 

    return tick3$.flatMap(() => this.http.get(usersURL)).map(res => 
    res.json()).publishBehavior(<User3[]>[]).refCount(); 



} 
    }

的json的樣子：

"operating_details":[[1497837618,0],[1497837738,0],[1497837858,0], 
    [1497837978,0],[1497838098,0],[1497838218,0],[1497838338,0], 
    [1497838458,0],[1497838578,0],[1497838698,0],[1497838818,0], 
    [1497838938,0],[1497839058,0],[1497839178,0],[1497839298,0], 
    [1497839418,0],[1497839538,0],[1497839658,0],[1497839778,0]]

來源

2017-06-20 Emile Cantero

通常在組件app.ts你，你將定義的服務文件的方法，設置了HTTP請求

getData(){ 
    return this.http.get(usersUrl) 
     .map(res => res.json()); 
}

然後會贊成觀察。

ngOnInit(){ 
    this.userService3.getData().subscribe(
     res => { 
      this.options.series[0].data = res; // set series data to options object 
     }, 
     err => { 
      // error callback 
     } 
}

來源

2017-06-21 02:07:29 LLai

很多很多感謝你我會嘗試它！ –

它doeasn't工作，對不起，我沒有時間來測試它，但它看起來不錯，所以在服務它很好，但在我的組件，當我嘗試你的代碼我編碼錯誤：[ts]屬性'訂閱'不存在於類型'void'上。任何 –

@EmileCantero聽起來像你從組件調用的方法沒有返回可觀察對象。對不起，我意識到我在回答中忘記了回覆聲明。我會更新它 – LLai

Angular2-highcharts在Angular 4項目中的可觀察性

回答

相關問題