sencha touch：實時圖表

Question

我正在使用sencha touch來顯示圖表並將數據添加到圖表的存儲中。但是，當我添加數據存儲時，我的圖表不會更新結果。 這是我的圖表代碼：

Ext.define('MyApp.view.MyLineChart1', { 
extend: 'Ext.chart.CartesianChart', 

requires: [ 
    'Ext.chart.axis.Category', 
    'Ext.chart.axis.Numeric', 
    'Ext.chart.series.Line' 
], 

config: { 
    itemId: 'xy', 
    store: 'MyStore', 
    colors: [ 
     '#115fa6', 
     '#94ae0a', 
     '#a61120', 
     '#ff8809', 
     '#ffd13e', 
     '#a61187', 
     '#24ad9a', 
     '#7c7474', 
     '#a66111' 
    ], 
    axes: [ 
     { 
      type: 'category', 
      fields: [ 
       'x' 
      ], 
      maximum: 5, 
      minimum: 0 
     }, 
     { 
      type: 'numeric', 
      fields: [ 
       'y' 
      ], 
      grid: { 
       odd: { 
        fill: '#e8e8e8' 
       } 
      }, 
      position: 'left' 
     } 
    ], 
    series: [ 
     { 
      type: 'line', 
      colors: 'rgba(0,200,0,0.3)', 
      style: { 
       smooth: true, 
       stroke: 'rgb(0,200,0)', 

      }, 
      xField: 'x', 
      yField: 'y' 
     } 
    ], 
    listeners: [ 
     { 
      fn: 'onChartShow', 
      event: 'show', 
      order: 'after' 
     } 
    ] 
}, 

onChartShow: function(component, eOpts) { 
    var TaskRunner = Ext.create("MyApp.controller.TaskRunner"); 
    chart = Ext.ComponentQuery.query("#xy")[0]; 
    store = chart.getStore(); 

    chart.animationSuspended = true; 
    chart.update(); 
    store.removeAll(); 
    this.timeChartTask = TaskRunner.start({ 
     run: this.update_chart, 
     interval: 1000, 
     repeat: 10, 
     scope: this 
    }); 

}, 

update_chart: function(chart) { 
    var me = this; 
    chart = Ext.ComponentQuery.query("#xy")[0]; 
    store = chart.getStore(); 
    count = store.getCount(); 
    xAxis = chart.getAxes()[0]; 
    visibleRange = 10000; 
    second = 1000; 
    console.log(xAxis.getMinimum()); 

    if (count > 0) { 
     lastRecord = store.getAt(count - 1); 
     xValue = lastRecord.get('x') + second; 
     if (xValue - me.startTime > visibleRange) { 
      me.startTime = xValue - visibleRange; 
      xAxis.setMinimum(this.startTime); 
      xAxis.setMaximum(xValue); 
      console.log("count >0"); 
     } 
     store.add({ 
      x: xValue, 
      y: me.getNextValue() 
     }); 
     //    store.load(); 
     chart.redraw(); 


    } else { 
     chart.animationSuspended = true; 
     me.startTime = Math.floor(Ext.Date.now()/second) * second; 
     xAxis.setMinimum(me.startTime); 
     xAxis.setMaximum(me.startTime + visibleRange); 

     store.add({ 
      x: this.startTime, 
      y: me.getNextValue() 
     }); 
     chart.animationSuspended = false; 
     //    store.load(); 
     chart.redraw(); 
     console.log("count < 0"); 
    } 
}, 

getNextValue: function(previousValue) { 
    var delta = Math.random()*4 - 2; 
    if (Ext.isNumber(previousValue)) { 
     return Ext.Number.constrain(previousValue + delta, -2, 2); 
    } 
    return Math.random()*4 - 2; 
} 

}）;

這是我的店：

Ext.define('MyApp.store.MyStore', { 
extend: 'Ext.data.Store', 

requires: [ 
    'MyApp.model.MyModel1' 
], 

config: { 
    model: 'MyApp.model.MyModel1', 
    storeId: 'MyStore' 
} 

}）;

，這是我的模型：

Ext.define('MyApp.model.MyModel1', { 
extend: 'Ext.data.Model', 

requires: [ 
    'Ext.data.Field' 
], 

config: { 
    fields: [ 
     { 
      name: 'x' 
     }, 
     { 
      name: 'y' 
     } 
    ] 
} 

}）;

Answer 1

如果你想組數據存儲使用此代碼：

var store = Ext.getStore('MyStore'); 
    store.load(function() { 
     var store = Ext.getStore('MyStore'); 
     store.removeAll(); 

     store.add({ 
      x: xValue, 
      y: me.getNextValue() 
     }); 
     store.sync(); 
    });