如果在代理中使用Ext.data.Store,则无法在EXTJS 4中呈现折线图

Question

我在EXTJS 4中渲染折线图时遇到问题.我有包含手风琴布局的视口.在那个布局中,我创建了非常简单的Chart.

这是我的代码:

var chartBox = Ext.create('Ext.chart.Chart', {
    width: 500,
    height: 300,
    style: 'background:#fff',
    animate: true,
    store: Ext.data.Store({
        fields: ['active'],
        data: [
            { 'name': 'Jan 2011',   'active': 10},
            { 'name': 'Feb 2011',   'active': 9},
            { 'name': 'Mar 2011',   'active': 13},
            { 'name': 'Apr 2011',   'active': 5},
            { 'name': 'Mei 2011',   'active': 17},
        ]
    }),
    theme: 'Category1',
    legend: {
        position: 'right'
    },
    axes: [{
        type: 'Numeric',
        position: 'left',
        fields: ['active'],
        label: {
            renderer: Ext.util.Format.numberRenderer('0,0')
        },
        title: 'Total',
        grid: true,
        minimum: 0
    },{
        type: 'Category',
        position: 'bottom',
        fields: ['name'],
        title: 'Month and Year'
    }],
    series: [{
        type: 'line',
        highlight: {
            size: 7,
            radius: 7
        },
        axis: 'left',
        xField: 'name',
        yField: 'active',
        markerConfig: {
            type: 'cross',
            size: 4,
            radius: 4,
            'stroke-width': 0
        }
    }]
})

然后,这是工作.看这个截图.

但在我改变这部分代码后:

store: Ext.data.Store({
    fields: ['active'],
    data: [
        { 'name': 'Jan 2011',   'active': 10},
        { 'name': 'Jan 2011',   'active': 10},
        { 'name': 'Jan 2011',   'active': 10},
        { 'name': 'Jan 2011',   'active': 10},
        { 'name': 'Jan 2011',   'active': 10},
    ]
}),

有了这个:

store: Ext.data.Store({
    fields: ['active'],
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url : 'data/statexample_noroot.json',
        reader: {
            type: 'json'
        }
    }
}),

从服务器加载数据,它是行不通的.看这个截图.

这是"statexample_noroot.json"中的内容:

[
    { 'name': 'Jan 2011',   'active': 10},
    { 'name': 'Feb 2011',   'active': 9},
    { 'name': 'Mar 2011',   'active': 13},
    { 'name': 'Apr 2011',   'active': 5},
    { 'name': 'Mei 2011',   'active': 17},
]

我只得到错误的渲染线图,警告"意外值NaN解析x属性.","意外值NaN解析宽度属性.","意外值矩阵(NaN,0,NaN,1,NaN,0)解析变换属性. " 等等....

我用Numeric设置了轴.我尝试一切包括使用Ext.data.Model,Ext.data.JsonStore,但仍然无法正常工作.

有什么不同？？我在这里缺少什么？谁知道为什么会发生这件事？我被困了好几个小时.

Answer 1

你忘记了另一个字段“名称”

fields: ['active'], => fields: ['active','name'],