0

この目的のために作成した 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);
    }
});

ただし、これは円グラフを表示しません。

4

1 に答える 1

0

ExtJS フレームワークのどのバージョンを使用していますか? 円グラフ シリーズの、またはおよびのrootプロパティに関するドキュメントが見つかりません。これは、Sencha の他の製品 (GXT の可能性がありますか?) の 1 つについて話していると思われます。JsonStoredataFieldcategoryField

そうは言っても、提供されたデータと JSFiddle (4.1) で利用可能な最新の ExtJS フレームワークを使用して円グラフを作成すると思いました。例はここにあります: http://jsfiddle.net/fgX74/ (その例のコードはこの記事の最後にあります)。

あなたのコードを出発点として使用して、それを機能させるために私が変更したものは次のとおりです。

  • JsonStoreのrootプロパティが存在しません。確かに文書化されていないので、入ってくるデータをそれに合わせて変更しました。供給されたデータは、単なるオブジェクトの配列になりました (同じ形式でデータを返すには、指定した URL を変更する必要があります)。
  • ポートレットを取り除き、実際のグラフに置き換えました。Ext.ux.Portletオブジェクトを拡張するためのアクセス権がありません。
  • dataFieldが置き換えられ、angleField実際のラベルに表示される内容を定義できるようになりました。categoryFieldlabel

最後に、実際のサンプル コードを次に示します。

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-24T18:18:17.720 に答える