2011-10-20 4 views
5

EXTJS 4の折れ線グラフをレンダリングする際に問題があります。私は、アコーディオンレイアウトを含むViewportを持っています。そのレイアウトでは、私は非常に簡単なグラフを作成します。Ext.data.Storeをプロキシで使用している場合、EXTJS 4の折れ線グラフのレンダリングに失敗する

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)があります。

私は軸に数値を設定しました。私はExt.data.Model、Ext.data.JsonStoreを使ってすべてを試してみましたが、まだ動作しませんでした。

違いは何ですか?私はここで何が欠けているのですか?誰でもこの事が起こる理由を知っていますか?私は何時間も立ち往生している。

+0

を忘れてしまいました!ストアのフィールド配列から '名前'がありません。私はあなたの問題を再現しようとしましたが、不完全なチャートは私には涼しく見えません。 –

+0

ああ、ええ、それはタイプミスです。しかし、私はすでに店舗のフィールド配列内の '名前'でそれを試しています。しかし両者はまだ動作しませんでした。多分私はこの正午をやり直すでしょう。 –

+0

EXTJSでは、ビューポート内でチャートを作成できないようです。私はまったく同じように新しいウィンドウ内で同じチャートを作ることができます。問題のドメインはまだ解決していませんが、新しい方法で実装しようとしました。 –

答えて

0

あなたは私が見ることができる唯一のことは誤植である他のフィールド「名前」

fields: ['active'], => fields: ['active','name'], 
関連する問題