1

我有来自模拟服务器的数据，我可以使用 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"
}];

但我无法加载来自模拟服务器的数据。任何人都可以帮我解决这个问题吗？

4

2 回答 2

0
  • 在哪里eventdata定义，你需要使用get函数来访问属性this.get('eventdata')
  • 它看起来eventdata是一个数组，所以你的观察者应该observes('eventdata.[]'),只有这样，每次添加/删除新项目时才会触发它。

  • 您可以timeSeriesBarContent:[]通过覆盖和 inupdateGraph方法在 init() 内部定义，而不是仅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 })
    });
})),

    });

于 2016-10-17T05:14:47.203 回答
0

您需要将您的组件与一些数据连接起来，并且数据来自Route... 在您Route的model钩子中，您应该返回从服务器检索到的记录。在您的模板中，使用类似{{time-series-chart barData=model}}或模型的某些子对象。

请记住，Route负责将数据连接到路由模板中的组件。所以：

  1. Route 的modelhook 从 store 中返回记录
  2. Route 的模板包含组件标签，将组件连接到数据。
于 2016-10-17T03:03:09.153 回答