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

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

这是我在component-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: [{}];

这是我在template-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"
}];

但我无法加载来自模拟服务器的数据。

---

有人能帮我吗？

你需要用一些数据连接你的组件，数据来自

路线

。。。在

路由

的

模型

钩子中，您应该返回从服务器检索到的记录。在模板中，使用类似于

{{time series chart barData=model}}

或模型的某个子对象

请记住，

路由

负责将数据连接到路由模板中的组件。因此：

路由的

model

hook从存储返回记录

管线的模板包含组件标记，用于将组件连接到数据

---

您需要用一些数据连接组件，数据来自

路线

。。。在

路由

的

模型

钩子中，您应该返回从服务器检索到的记录。在模板中，使用类似于

{{time series chart barData=model}}

或模型的某个子对象

请记住，

路由

负责将数据连接到路由模板中的组件。因此：

路由的

model

hook从存储返回记录

管线的模板包含组件标记，用于将组件连接到数据

• 如果定义了is

  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 })
      });
  })),
  

  }))

• 如果定义了is

  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 v2.8.0，当我使用ember inspector进行监视时，来自模拟服务器的数据会出现，但我无法在图表中显示它。如果我需要提供进一步的详细信息来解决此问题，请告诉我。@IsaacShrestha您是如何包括

组件-图表的。hbs

您是否像这样发送

事件数据

{{component chart eventdata=eventdata}。如果是这样，您可以尝试在init或didInsertElement之后运行

updateGraph

observer函数。像这样..

updateGraph:Ember.observer（'eventdata.[]'，function（）{…your code}）.on（'init'）

export default Ember.Component.extend（{timeSeriesBarContent:[]，eventdata:null，updateGraph:Ember.on（'init'，Ember.observer（'eventdata'，function（）{var barcontent=this.get（'timeSeriesBarContent'）；console.log（'updateGraph called'）；this.get（'eventdata'）.forEach（函数（项）{barcontent.pushObject（{'time'：item.timeStamp，'label'：item.eventType，'value'：item.event+“：“+item.device}）；}；}）），}）；妈的，我很抱歉弄得一团糟，我不小心按了Enter，现在无法删除它。在对chart-demo.js文件进行以下更改后，我对上面的3条注释感到抱歉。我几乎解决了问题，但现在仍在更改日期格式。我需要推送对象的时间，格式为：d3.time.format（“%Y-%m-%d”）。解析(“2013-01-14”）；我应该在哪里以及如何更新此格式？如果我能够以此格式获得时间，我的图表将起作用。谢谢：）感谢您的回复。我尝试了这个概念，但问题没有解决。我使用的是ember v2.8.0，当我使用ember inspector进行监视时，来自模拟服务器的数据会出现，但我无法在图表中显示。如果我需要提供进一步的详细信息来解决此问题，请告诉我。@IsaacShrestha您包括哪些内容

component-chart.hbs

是否像这样发送

eventdata

{{code>{component-chart eventdata=eventdata}}。如果是这样，那么您可以尝试在init或diInsertelement之后运行

updateGraph

observer函数。像这样..

updateGraph:Ember.observer（'eventdata.[]'，function（）{您的代码}）.on（'init'）

export default Ember.Component.extend（{timeSeriesBarContent:[]，eventdata:null，updateGraph:Ember.on（'init'，Ember.observer（'eventdata'，function（）{var barcontent=this.get（'timeSeriesBarContent'）；console.log（'updateGraph called'）；this.get（'eventdata'）.forEach（函数（项）{barcontent.pushObject({'time'：item.timeStamp，'label'：item.eventType，'value'：item.event+“：“+item.device}）；}）；}”），}）；妈的，我很抱歉弄得一团糟，我不小心按了Enter，现在无法删除。在对chart-demo.js文件做了以下更改后，我对上面的3条注释感到抱歉。我几乎解决了这个问题，但stuc