Для отображения данных с фиктивного сервера в chartjs с помощью ember

Question

У меня есть данные, поступающие с mock-сервера, которые я могу просмотреть с помощью ember inspector. Мне нужно отобразить эти данные в гистограмме, используя 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-сервера. Может ли кто-нибудь помочь мне с этим, пожалуйста?

Answer 1

• где eventdata определено, вам нужно использовать функцию get для доступа к свойствамthis.get('eventdata')
• это выглядит eventdata это массив, так что ваш наблюдатель должен быть observes('eventdata.[]'), только тогда это будет срабатывать при каждом добавлении / удалении нового элемента.

• Вы можете определить timeSeriesBarContent:[] внутри init() путем переопределения и в 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 })
      });
  })),
  

  });

Answer 2

Вам необходимо связать свой компонент с некоторыми данными, и данные поступают из Route... В вашем Route"s model хук, вы должны вернуть записи, которые вы получили с сервера. В вашем шаблоне используйте что-то вроде {{time-series-chart barData=model}} или некоторый подобъект вашей модели.

Помните Route отвечает за подключение данных к вашему компоненту в шаблоне маршрута. Так:

1. маршрута model Hook возвращает записи из магазина
2. Шаблон маршрута содержит тег компонента, связывающий компонент с данными.