extjs4 - 如果将 Ext.data.Store 与代理一起使用，则无法在 EXTJS 4 中呈现折线图

Question

我在 EXTJS 4 中渲染折线图时遇到问题。我有包含 Accordion 布局的视口(viewport)。在该布局中，我创建了非常简单的图表。

这是我的代码:

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},
]

我只得到错误的渲染折线图，并带有警告“解析 x 属性的意外值 NaN。”、“解析宽度属性的意外值 NaN。”、“解析变换属性的意外值矩阵(NaN,0,NaN,1,NaN,0)。 "ETC....

我用数字设置了轴。我尝试了一切，包括使用 Ext.data.Model、Ext.data.JsonStore，但仍然没有用。

有什么不同？？我在这里缺少什么？有谁知道为什么会发生这种情况？我被困了好几个小时。

Answer 1

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

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