Question

我有来自模拟服务器的数据，我可以使用ember检查器查看。我需要使用chartjs在条形图中显示这些数据。

这是我的组件代码 - chart.js

从'ember'导入Ember;

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"
}];

但是我无法加载来自mock-server的数据。有人可以帮我这个吗？

Answer 1

您需要将您的组件与某些数据相关联，数据来自Route ...在Route的{{1}}挂钩中，您应该返回记录已从服务器检索。在模板中，使用类似model或模型的某个子对象的内容。

请记住，{{time-series-chart barData=model}}负责在路由模板中将数据连接到您的组件。所以：

路由的Route挂钩从商店返回记录
路由模板包含组件标记，将组件连接到数据。

Answer 2

定义了eventdata，您需要使用get函数来访问属性this.get('eventdata')
它看起来eventdata是一个数组，因此您的观察者应该只有observes('eventdata.[]'),，然后每次添加/删除新项目时都会触发此项。

您可以通过覆盖在init（）内定义timeSeriesBarContent:[]，而不是updateGraph方法而不是append尝试使用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 })
    });
})),

}）;

使用ember将模拟服务器中的数据显示到chartjs中

2 个答案: