0

以下のようにデータを直接渡すと、円グラフが正常に描画されました

data:  [{
            'name': 'metric one',
            'data': 10
        }, {
            'name': 'metric two',
            'data': 7
        }, {
            'name': 'metric three',
            'data': 5
        }, {
            'name': 'metric four',
            'data': 2
        }, {
            'name': 'metric five',
            'data': 27
        }]
    });

しかし、これらの json データを ajax で取得しようとすると、円グラフが表示されません。誰でもこれに対する解決策を教えてください。

index.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Ext.chart.series.Pie Example</title>
    <link rel="stylesheet" href="http://cdn.sencha.io/try/extjs/4.1.0/resources/css/ext-all-gray.css"/>
    <script src="http://cdn.sencha.io/try/extjs/4.1.0/ext-all-debug.js"></script>
    <script src="extJS/app.js"></script>
</head>
<body>
   <div id="myExample"></div>
</body>
</html>

app.js

Ext.onReady(function() {
    Ext.Ajax.request({
        url: 'getJsonforPie.action',
        dataType : "json",
        params: {

        },
        success: function(response){
            getResources = response.responseText;
           alert(JSON.stringify(getResources))

        }
    });

    // var store = Ext.create('myStore');
    //to load data use store.load()

    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data'],
        data: getResources
          //  [{

//            'name': 'metric one',
//            'data': 10
//        }, {
//            'name': 'metric two',
//            'data': 7
//        }, {
//            'name': 'metric three',
//            'data': 5
//        }, {
//            'name': 'metric four',
//            'data': 2
//        }, {
//            'name': 'metric five',
//            'data': 27
//        }]
    });


    Ext.create('Ext.chart.Chart', {
        renderTo: 'myExample',
        width: 500,
        height: 350,

        animate: true,
        store: store,
        theme: 'Base:gradients',
        series: [{
            type: 'pie',
            angleField: 'data',

            showInLegend: true,
            tips: {
                trackMouse: true,
                width: 140,
                height: 28,

                renderer: function(storeItem, item) {
                    // calculate and display percentage on hover
                    var total = 0;
                    store.each(function(rec) {
                        total += rec.get('data');
                    });
                    this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
                }
            },
            highlight: {
                segment: {
                    margin: 20
                }
            },
            label: {
                field: 'name',
                display: 'rotate',
                contrast: true,
                font: '18px Arial'
            }
        }]
    });
});

struts.xml

<action name="getJsonforPie" class="commonpackage.DashboardUtilities" method="getJsonforPie"/>

getJsonforPie メソッド

public void getJsonforPie() throws IOException
{
        HttpServletResponse response= (HttpServletResponse)  
        ActionContext.getContext().get(StrutsStatics.HTTP_RESPONSE);
        JSONArray zoneAreas = new JSONArray();
        for(int i=1;i<5;i++)
        {
         HashMap map=new HashMap();
         map.put("name", "metric "+i);
         map.put("data", 10); 
         zoneAreas.put(map);
        }
        System.out.println(zoneAreas.toString());
        response.getWriter().write(zoneAreas.toString());
}

更新 2 ( app.js )

Ext.onReady(function() {
    var getResources;
    var flag=0;
    Ext.Ajax.request({
        url: 'getJsonforPie.action',
        dataType : "json",
        params: {

        },
        success: function(response){
        getResources = response.responseText;
        createChart(getResources);

}
    });

var createChart = function(resources) {
    var store = Ext.create('Ext.data.JsonStore', {
       fields: ['name', 'data'],
       data: resources
    });


    Ext.create('Ext.chart.Chart', {
        renderTo: 'myExample',
        width: 500,
        height: 350,

        animate: true,
        store: store,
        theme: 'Base:gradients',
        series: [{
            type: 'pie',
            angleField: 'data',

            showInLegend: true,
            tips: {
                trackMouse: true,
                width: 140,
                height: 28,

                renderer: function(storeItem, item) {
                    var total = 0;
                    store.each(function(rec) {
                        total += rec.get('data');
                    });
                    this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
                }
            },
            highlight: {
                segment: {
                    margin: 20
                }
            },
            label: {
                field: 'name',
                display: 'rotate',
                contrast: true,
                font: '18px Arial'
            }
        }]
    });
}

});
4

1 に答える 1