2011-10-20 5 views
5

Ho il rendering del grafico a linee in EXTJS 4. Dispongo di una vista contenente layout di fisarmonica. In quel layout, creo un grafico molto semplice.Impossibile eseguire il rendering del grafico a linee in EXTJS 4 se si utilizza Ext.data.Store con proxy

Ecco il mio codice:

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

Poi, è il lavoro. Vedi questo screenshot.

Render Line Chart EXTJS 4 correct!

Ma dopo che ho cambiato questa parte di codice:

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

con questo:

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

per caricare i dati dal server, non è il lavoro. Vedi questo screenshot.

Rendering Line Chart EXTJS 4 failed!

Questo è il contenuto da "statexample_noroot.json": "valore imprevisto NaN parsing attributo x"

[ 
    { '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}, 
] 

ho solo falso Grafico rendering delle linee con avviso, "il valore imprevisto NaN attributo di larghezza di analisi. "," Matrice di valore inatteso (NaN, 0, NaN, 1, NaN, 0) attributo di trasformazione di parsing. " ecc ....

Ho impostato assi con Numerico. Provo che tutto include l'uso di Ext.data.Model, Ext.data.JsonStore, ma ancora non ha funzionato.

Qual è la differenza ?? Cosa mi manca qui? Qualcuno sa perché questa cosa accada? Sono bloccato per molte ore.

+0

L'unica cosa che posso vedere è un errore di battitura! Manca il "nome" dall'array di campi del negozio! Ho provato a replicare il tuo problema e non riesco a ottenere un grafico incompleto mi sembra interessante. –

+0

Oh, sì, è un errore. Ma l'ho già provato con 'nome' all'interno dell'array di campi del negozio. Ma entrambi continuarono a non funzionare. Forse ci riproverò questo mezzogiorno. –

+0

Voglio solo chiarire che in EXTJS, sembra che non possiamo creare un grafico all'interno di una vista. Posso creare lo stesso grafico in una nuova finestra con esattamente lo stesso risultato. Il mio dominio del problema non è ancora stato risolto, ma ho provato a implementarlo in un modo nuovo. –

risposta

0

si dimenticarono l'altro campo "Nome"

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