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

如果要存储设置数据，请使用以下代码：

<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
        <div class="container topnav">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand topnav" href="/">Host</a>
            </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#">Login</a>
                </li>
                <li>
                    <a href="#">Sign up</a>
                </li>
            </ul>

            <form class="navbar-form navbar-right" role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>

        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

sencha touch：实时图表

1 个答案: