2011-10-20 7 views
5

के साथ Ext.data.Store का उपयोग करना मुझे EXTJS 4 में लाइन चार्ट प्रस्तुत करने में समस्या है। मेरे पास व्यूपोर्ट है जिसमें accordion लेआउट है। उस लेआउट में, मैं बहुत ही सरल चार्ट बनाता हूं।एक्सटीजेएस 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' 
     } 
    } 
}), 

सर्वर से डेटा लोड करने, यह काम नहीं कर रहा है। यह स्क्रीनशॉट देखें।

[ 
    { '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 चेतावनी के साथ झूठे प्रतिपादन लाइन चार्ट मिलता है," अनपेक्षित शब्द NaN एक्स विशेषता को पार्स। ":

Rendering Line Chart EXTJS 4 failed!

यह" statexample_noroot.json "से सामग्री है पार्सिंग चौड़ाई विशेषता। "," अप्रत्याशित मान मैट्रिक्स (NaN, 0, NaN, 1, NaN, 0) विश्लेषण विश्लेषण पार्सिंग। " आदि ....

मैंने न्यूमेरिक के साथ अक्ष सेट किए हैं। मैं Ext.data.Model, Ext.data.JsonStore का उपयोग करके सबकुछ शामिल करने का प्रयास करता हूं, लेकिन अभी भी काम नहीं करता है।

क्या अंतर है ?? मैं यहाँ क्या याद कर रहा हूँ? किसी को पता है कि यह क्यों हुआ? मैं बहुत सारे घंटों तक फंस गया हूं।

+0

केवल एक चीज मैं देख सकता हूँ लिखने में कोई त्रुटि त्रुटि है भूल गया! आप स्टोर के फील्ड सरणी से 'name' खो रहे हैं! मैंने आपकी समस्या को दोहराने की कोशिश की और मुझे एक अपूर्ण चार्ट नहीं मिला जो मुझे अच्छा लग रहा है। –

+0

ओह, हाँ, यह टाइपो है। लेकिन मैंने पहले से ही स्टोर के फील्ड सरणी के भीतर 'नाम' के साथ कोशिश की है। लेकिन उनमें से दोनों अभी भी काम नहीं किया। शायद मैं इस दोपहर फिर से कोशिश करूंगा। –

+0

बस यह स्पष्ट करना चाहते हैं कि EXTJS में, ऐसा लगता है कि हम व्यूपोर्ट के भीतर चार्ट नहीं बना सकते हैं। मैं एक ही चार्ट को उसी विंडो के साथ नई विंडो में बना सकता हूं। मेरी समस्या डोमेन अभी तक हल नहीं हुआ है, लेकिन मैंने इसे नए तरीके से कार्यान्वित करने का प्रयास किया। –

उत्तर

0

आप अन्य क्षेत्र "नाम"

fields: ['active'], => fields: ['active','name'], 
संबंधित मुद्दे