2014-01-10 19 views
0

我在localhost上有這個JSon。如何在餅圖上顯示嵌套的Json?

{ 
    "sucess": true, 
    "total":150, 
    "casa": [{ 
     "name": { 
      "mentor": "stark" 
      }, 
     "data":60 
    },{ 
     "name":"baratheon", 
     "data":50 
    },{ 
     "name":"lannister", 
     "data":40 
    },{ 
     "name":"baratheon", 
     "data":30 
    },{ 
     "name":"greyjoy", 
     "data":20 
    },{ 
     "name":"tyrell", 
     "data":10 
    }] 
} 

而這個Js。

Ext.onReady(function() { 

    Ext.define('User', { 
       extend: 'Ext.data.Model', 
       fields: [ { 
        name: 'name', 
        type: 'string' 
       }, { 
        name: 'data', 
        type: 'int' 
       }] 
      }); 

      var store= Ext.create('Ext.data.Store', { 
        storeId: 'casas', 
        model: 'User', 
        autoLoad: true, 
        proxy: { 
         type: 'ajax', 
         url: 'lala1.json', 
         reader: { 
          type: 'json', 
          root: 'casa' 
         } 
        } 
       }); 

     Ext.create('Ext.chart.Chart', { 
      renderTo: 'myExample', 
      width: 450, 
      height: 320, 
      legend: { 
       position: 'right' 
      }, 
      animate: true, 
      store: store, 
      theme: 'Base:gradients', 
      series: [{ 
       type: 'pie', 
       angleField: 'data', 

       showInLegend: true, 
       tips: { 
        trackMouse: true, 
        width: 140, 
        height: 28, 

        renderer: function(storeItem, item) { 
         var total = 0; 
         store.each(function(rec) { 
          total += rec.get('data'); 
         }); 
         this.setTitle(storeItem.get('name') + ': ' +  Math.round(storeItem.get('data')/total * 100) + '%'); 
        } 
       }, 
       highlight: { 
        segment: { 
         margin: 20 
        } 
       }, 
       label: { 
        field: 'name', 
        display: 'rotate', 
        contrast: true, 
        font: '18px Arial' 
       } 
      }] 
     }); 
    }); 

而且每次我嘗試顯示導師的名字時,只需在餅圖的字段上顯示[object Object]。我錯過了什麼?我已經在這裏閱讀了一些關於這方面的文章,但是他們沒有解決我的問題,有人可以幫助我?

+0

當名稱包含具有導師姓名的對象時,您希望顯示爲標題的內容?只是導師的名字? – Akatum

+0

是的,導師的名字。現在我唯一的結果就是場上的[object Object]。 –

回答

0

如果你可以改變你的JSON,改變其結構看起來像ExtJS的期望它:

"name": "stark", 
"data":60 

,而不是

"name": { 
    "mentor": "stark" 
}, 
"data":60 

如果你的JSON從第三方源起源,你必須在繪製圖表之前轉換您的數據。實現此目的的一種方法是使用商店的load event來轉換數據,該數據將記錄作爲參數。

+0

這個Json只是我必須做的一個例子,而這個Json會來到我這裏嵌套,我試圖讓這個案例導師的價值顯示在我的餅圖上,但只是顯示' [object Object] –

+0

那麼這個json來自第三方來源? –