Не удается отобразить линейную диаграмму в EXTJS 4, если используется Ext.data.Store с прокси - PullRequest
Новая
       19

Не удается отобразить линейную диаграмму в EXTJS 4, если используется Ext.data.Store с прокси

5 голосов
/ 20 октября 2011

У меня проблема с рендерингом линейной диаграммы в EXTJS 4. У меня есть 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
        }
    }]
})

Тогда это работа. Смотрите этот скриншот.

Render Line Chart EXTJS 4 correct!

Но после того, как я изменю эту часть кода: 

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'
        }
    }
}),

для загрузки данных с Сервера это не работает. Смотрите этот скриншот.

Rendering Line Chart EXTJS 4 failed!

Это содержимое из "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, но все равно не работает.

Какая разница? Что мне здесь не хватает? Кто-нибудь знает, почему это происходит? Я застрял на много часов.

1 Ответ

0 голосов
/ 09 ноября 2011

вы забыли другое поле "имя" 

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