검색된 데이터를 센카 파이 차트에 표시하는 방법

JSON 데이터 저장소에서 Sencha 원형 차트로 보낸 데이터를 표시 할 수 없기 때문에 모든 사람이 나를 도와주고 있습니다. 이 목적으로 만들어졌습니다.검색된 데이터를 센카 파이 차트에 표시하는 방법

I 값의 다음 세트를 포함하는 제 변수 어레이의 인쇄 된 형태로 아래의 결과를 표시하고 :

: 한편

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

내 엽차 파이로 전송을 I는 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 프레임 워크를 사용하고 있습니까? 나는 (아마도 GXT?)을 JsonStore의 root 재산에 모든 문서, 또는 내가 당신이 엽차의 다른 제품의 약 이야기하고 생각하게 원형 차트 계열의 dataField 및 categoryField의를 찾을 수 없습니다

으로 당신이 제공 한 데이터와 JSFiddle (4.1)에서 사용할 수있는 최신 ExtJS 프레임 워크를 사용하여 원형 차트를 작성할 것이라고 생각했습니다. 이 예제는 여기에서 찾을 수 있습니다 : http://jsfiddle.net/fgX74/ (이 예제의 코드는이 게시물의 맨 아래에 있습니다).

는

JsonStore의 root 속성은 존재하지 않습니다

여기에 내가이 작업을 진행하도록 변경 무엇, 출발점으로 코드를 사용. 확실히 문서화되지는 않았으므로 데이터를 변경했습니다. 이제 입력 된 데이터는 객체의 배열입니다 (제공된 URL은 동일한 형식으로 데이터를 반환하기 위해 변경해야합니다).
포틀릿을 제거하고 실제 차트로 교체했습니다. 확장하려면 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

검색된 데이터를 센카 파이 차트에 표시하는 방법

답변

관련 문제