如何呈現煎茶餅圖

我一直在尋找每一個地方的人來幫助我，因爲它一直無法對我提出從JSON數據存儲我送到我的煎茶餅圖中的數據檢索到的數據爲此創建。如何呈現煎茶餅圖

我從我的含有下列組值變量陣列的印刷形式顯示下面的結果：

Array ([0] => Array ([0] => 19 [nombre] => 19 [1] => Chargé de mission [type] => Charge de mission)[1] => Array ([0] => 204 [nombre] => 204 [1] => Pré-adhérent [type] => Pre-adherent)[2] => Array ([0] => 1 [nombre] => 1 [1] => Administrateur [type] => Administrateur)[3] => Array ([0] => 25 [nombre] => 25 [1] => Auto-entrepreneur [type] => Auto-entrepreneur)[4] => Array ([0] => 1157 [nombre] => 1157 [1] => Adhérent [type] => Adherent)[5] => Array ([0] => 429 [nombre] => 429 [1] => Salarié [type] => Salarie))

同時將其發送到我的煎茶餡餅我使用JSON編碼以下：

{"success":true,"total":"0","data":[{"0":"19","nombre":"19","1":null,"type":"Charge de mission"},{"0":"204","nombre":"204","1":null,"type":"Pre-adherent"},{"0":"1","nombre":"1","1":"Administrateur","type":"Administrateur"},{"0":"25","nombre":"25","1":"Auto-entrepreneur","type":"Auto-entrepreneur"},{"0":"1157","nombre":"1157","1":null,"type":"Adherent"},{"0":"429","nombre":"429","1":null,"type":"Salarie"}]}

我創造了我的JSON存儲和餅圖如下：

var userStore = new Ext.data.JsonStore({ 
    url: 'rapport/chartTypeProfils.php', 
    fields: [{name:'nombre', type:'int'},'type'], 
    root: 'data' 
    //totalProperty:'total' 
}); 

userPie = Ext.extend(Ext.ux.Portlet,{ 
    constructor: function(config) { 
     Ext.apply(this, { 
      //width: 400, 
      height: 300, 
      title: 'Utilisateur', 
      tools: tools, 
      //renderTo: 'user', 
      items: { 
       itemId: 'userStore', 
       store: userStore, 
       xtype: 'piechart', 
       dataField: 'nombre', 
       categoryField: 'type', 
       //extra styles get applied to the chart defaults 
       extraStyle: { 
        legend: { 
         display: 'left', 
         padding: 5, 
         font: { 
          family: 'Tahoma', 
          size: 13 
         } 
        } 
       } 
      } 
     }); 
     userPie.superclass.constructor.apply(this, arguments); 
    } 
});

但是，這並不顯示餅圖。

來源

2013-03-22 PhanJAf

您使用的是什麼版本的ExtJS框架？我找不到在JsonStore的root財產的任何文件，或dataField和categoryField S中的餅圖系列這讓我覺得你說的煎茶的其他產品約一（GXT可能？）

隨着說我想我會用你提供的數據和JSFiddle（4.1）上提供的最新的ExtJS框架來創建餅圖。這個例子可以在這裏找到：http://jsfiddle.net/fgX74/（這個例子的代碼在這篇文章的底部）。

使用你的代碼爲出發點，這是我改變得到它的工作：

的JsonStore的root屬性不存在。這當然沒有被證實，所以我改變了適合的數據。輸入的數據現在只是一個對象數組（您提供的url必須更改爲以相同格式返回數據）。
我已經擺脫了portlet，並用實際圖表取而代之。我無法訪問Ext.ux.Portlet對象以擴展它。
dataField已被替換爲angleField而categoryField已被替換爲label，允許您定義實際標籤中顯示的內容。

最後，這裏是一個實際的例子代碼：

Ext.onReady(function(){  
    var userStore = new Ext.data.JsonStore({ 
     data: [{"0":"19","nombre":"19","1":null,"type":"Charge de mission"},{"0":"204","nombre":"204","1":null,"type":"Pre-adherent"},{"0":"1","nombre":"1","1":"Administrateur","type":"Administrateur"},{"0":"25","nombre":"25","1":"Auto-entrepreneur","type":"Auto-entrepreneur"},{"0":"1157","nombre":"1157","1":null,"type":"Adherent"},{"0":"429","nombre":"429","1":null,"type":"Salarie"}], 
     fields: [{name:'nombre', type:'int'},'type'], 
     root: 'data' 
    }); 

    Ext.create('Ext.chart.Chart', { 
     renderTo: Ext.getBody(), 
     width: 500, 
     height: 350, 
     animate: true, 
     store: userStore, 
     series: [{ 
      type: 'pie', 
      angleField: 'nombre', 
      showInLegend: true, 
      label: { 
       field: 'type', 
       display: 'rotate', 
       contrast: true, 
       font: '18px Arial' 
      } 
     }] 
    }); 
});

來源

2013-03-24 18:18:17

如何呈現煎茶餅圖

回答

相關問題