sencha touch：实时图表

Question

我正在使用 sencha touch 显示图表并将数据添加到图表的存储 dynamically.but 当我将数据添加到存储时，我的图表没有更新结果。这是我的图表代码：

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

sencha touch：实时图表

sencha touch: real time chart

charts

real-time

sencha-touch-2