Sencha Touch2 Mvc 如何集成chart组件

.现在st的chart只有beta版，使用的sencha-touch.js可能与最新的文件有出入，所以引用的时候如果把touch-chart.js直接和2.01的sencha.js一起用会有一个对象未定义的问题，因此lz说说自己的使用方式吧

首先：

1.引入chart包的两个js文件

sencha-touch-debug.js

touch-charts-debugs.js

2.然后是touch-charts-full.css

3.然后是chart sdk包内里面src的文件全部考到你的sencha touch sdk包 sdk src中

4.ok让我们开始用chart吧

有疑问可去q群交流224711028

实例化一个图表

/**
 * Created with JetBrains WebStorm.
 * User: Administrator
 * Date: 12-10-26
 * Time: 下午2:55
 * To change this template use File | Settings | File Templates.
 */
Ext.define('App.store.TestStore', {
    extend: 'Ext.data.Store',

    requires: [
    ],

    config: {
        fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
        data: [
            {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
            {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
            {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
            {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
            {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
        ]
    }
});

Ext.define('App.view.TestChart', {
    extend: 'Ext.chart.Chart',
    xtype: 'testchart',

    config: {
        animate: true,
        store: 'TestStore',
        axes: [{
            type: 'Numeric',
            position: 'bottom',
            fields: ['data1'],
            title: 'Sample Values',
            grid: true,
            minimum: 0
        }, {
            type: 'Category',
            position: 'left',
            fields: ['name'],
            title: 'Sample Metrics'
        }],
        series: [{
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            xField: 'name',
            yField: 'data1',
            markerConfig: {
                type: 'cross',
                size: 4,
                radius: 4,
                'stroke-width': 0
            }
        }, {
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            fill: true,
            xField: 'name',
            yField: 'data3',
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            }
        }]


    }
});