如何呈现煎茶饼图

我一直在寻找每一个地方的人来帮助我，因为它一直无法对我提出从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

如何呈现煎茶饼图

回答

相关问题