使用模擬器將數據從模擬服務器顯示到圖表中

我有來自模擬服務器的數據，我可以使用ember inspector查看數據。我需要使用chartjs在條形圖中顯示這些數據。使用模擬器將數據從模擬服務器顯示到圖表中

這是我的代碼組件 - 從 '餘燼' chart.js之

進口灰燼;

export default Ember.Component.extend({ 
    updateGraph: function(){ 
    var barcontent = this.get('timeSeriesBarContent'); 
    console.log('updateGraph called'); 
    eventdata.forEach(function(item,index){ 
    timeSeriesBarContent.append({time: item.timeStamp, label: item.eventType, value: (item.event +" : "+ item.device) }) 
    }); 
    }.observes('eventdata'), 
    timeSeriesBarContent: [{}];

這是我的模板代碼 - chart.hbs

{{time-series-chart barData=timeSeriesBarContent }}

如果我使用內部

timeSeriesBarContent: [{ 
time: d3.time.format('%Y-%m-%d').parse("2013-05-15"), 
     label: "test data", 
     value: 49668, 
     type: "money" 
}];

靜態數據柱狀圖獲取顯示，但我不能夠加載來自模擬服務器的數據。任何人都可以幫助我嗎？

來源

2016-10-17 Isaac Shrestha

您需要連接您的組件和一些數據，並且數據來自Route ...在您的Route的model掛鉤中，您應該返回從服務器檢索到的記錄。在你的模板中，使用類似{{time-series-chart barData=model}}或你的模型的一些子對象。

請記住Route負責將數據連接到路由模板中的組件。所以：

路線的model鉤從商店
路線的模板包含的組件標籤返回的記錄，該組件連接到數據。

來源

2016-10-17 03:03:09

謝謝你的迴應:)你能告訴我如何更新來自模型的數據的日期格式嗎？我應該建立自己的自定義轉換，然後使用它們嗎？ –

被eventdata被定義在哪裏，你需要使用get函數訪問屬性this.get('eventdata')
它看起來eventdata是一個數組，所以你的觀察應該是observes('eventdata.[]'),只有那麼這將被觸發每次新項目被添加/刪除。

您可以通過覆蓋在updateGraph方法，而不是append嘗試定義timeSeriesBarContent:[]裏面的init（）使用pushObject方法只有那麼這將更新邊界模板。

export default Ember.Component.extend({ 
timeSeriesBarContent: [], 
eventData: [], 
init() { 
    this._super(...arguments); 
    this.set('timeSeriesBarContent', []); 
    this.set('eventData', []); 
}, 
updateGraph: Ember.on('init', Ember.observer('eventdata.[]', function() { 
    var barcontent = this.get('timeSeriesBarContent'); 
    console.log('updateGraph called'); 
    this.get('eventdata').forEach(function(item, index) { 
     barcontent.pushObject({ 'time': item.timeStamp, 'label': item.eventType, 'value': item.event + " : " + item.device }) 
    }); 
})),

}）;

來源

2016-10-17 05:14:47 kumkanillam

謝謝你的迴應。我嘗試了這個概念，但問題沒有解決。我使用的是ember v2.8.0，並且當我使用ember inspector進行監控時，有來自模擬服務器的數據，但我無法在圖表中顯示它。請讓我知道是否需要提供更多詳細信息才能解決此問題。 –

@IsaacShrestha你如何包含'component - chart.hbs'你如何發送'eventdata'就像這個'{{component-chart eventData = eventData}} ..如果是這樣，那麼你可以嘗試運行'updateGraph'觀察者函數在init或didInsertElement之後。像這樣..'updateGraph：Ember.observer（'eventdata。[]'，function（）{....您的代碼}）。on（'init'）' – kumkanillam

export default Ember.Component。延伸（{ \t timeSeriesBarContent：[]， \t EVENTDATA：空， \t updateGraph：Ember.on（ '初始化'，Ember.observer（ 'EVENTDATA'，函數（）{ \t \t變種barcontent = this.get （ 'timeSeriesBarContent'）; \t \t的console.log（ 'updateGraph稱爲'）; \t \t this.get（ 'EVENTDATA'）的forEach（函數（項目）{ \t \t \t barcontent.pushObject（{ '時間'。：item.timeStamp，'label'：item.eventType，'value'：item.event +「：」+ item.device}）; \t \t}）; \t}））， }）; –

使用模擬器將數據從模擬服務器顯示到圖表中

回答

相關問題