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:[]、メソッドをオーバーライドして init() 内で定義できます。これにより、境界テンプレートが更新されます。updateGraphappendpushObject

    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. ルートのmodelフックはストアからレコードを返します
  2. Route のテンプレートには、コンポーネントをデータに接続する component タグが含まれています。
于 2016-10-17T03:03:09.153 に答える