如何在sencha饼图上显示检索到的数据

时间:2013-03-22 09:54:48

标签: extjs pie-chart sencha-charts

我一直在寻找有人帮助我的地方,因为我无法从我为此目的创建的JSON数据存储中显示发送到Sencha饼图的数据。

我从包含以下值集的变量数组的打印形式显示以下结果:

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

与此同时,为了将它发送到我的Sencha派,我使用下面编码的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);
    }
});

但是这不会显示饼图。

1 个答案:

答案 0 :(得分:0)

您使用的是什么版本的ExtJS框架?我找不到关于root的{​​{1}}属性的任何文档,或饼图系列的JsonStoredataField,这让我觉得你在说话关于Sencha的其他产品之一(可能是GXT?)

话虽如此,我想我会使用您提供的数据和JSFiddle(4.1)上提供的最新ExtJS框架来敲击饼图。可以在此处找到示例:http://jsfiddle.net/fgX74/(该示例的代码位于此帖的底部)。

使用您的代码作为起点,这是我改变它以使其工作的原因:

  • JsonStore的categoryField属性不存在。它肯定没有记录,我改变了适合的数据。输入的数据现在只是一个对象数组(您提供的网址必须更改为以相同的格式返回数据)。
  • 我已经删除了portlet并替换为实际图表。我无法访问root对象以扩展它。
  • Ext.ux.Portlet已替换为dataFieldangleField已替换为categoryField,可让您定义实际标签中显示的内容。

最后,这是实际的示例代码:

label