使用json文件中的extjs绘制饼图

时间:2013-09-14 02:04:48

标签: javascript ajax json extjs

我通过ajax调用使用带有json值的extjs成功绘制了一个饼图。但我无法通过从名为 myjson.json 的json文件中检索json值来绘制相同的方法,

任何人都可以告诉我如何通过使用以下代码从json文件( myjson.json )检索json值来绘制饼图

我的代码如下所示

Ext.onReady(function() { 
    var getResources,getResources1;
    var flag=0;
    Ext.Ajax.request({
        dataType : "json",
        url: 'getHSEXmatrix.action',
        params: {
        },
        success: function(response){
         getResources = Ext.decode(response.responseText);
        createChart3(getResources);
     }
    });


var createChart3 = function(resources) {
    var store = Ext.create('Ext.data.JsonStore', {
       fields: ['name', 'data'],
       data: resources
    });
    Ext.create('Ext.chart.Chart', {
        renderTo: 'myExample3',
        width: 500,
        height: 300,
        animate: true,
        store: store,
        axes: [{
            type: 'Numeric',
            position: 'bottom',
            fields: ['data'],
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0')
            },
            title: 'No of actions',
            grid: true,
            minimum: 0
        }, {
            type: 'Category',
            position: 'left',
            fields: ['name'],
            title: 'Exclation Matrix'
        }],
        series: [{
            type: 'bar',
            axis: 'bottom',
            highlight: true,
            tips: {
                trackMouse: true,
                width: 140,
                height: 28,
                renderer: function (storeItem, item) {
                    this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
                }
            },
            label: {
                display: 'insideEnd',
                field: 'data',
                renderer: Ext.util.Format.numberRenderer('0'),
                orientation: 'horizontal',
                color: '#333',
                'text-anchor': 'middle'
            },
            xField: 'name',
            yField: 'data'
        }]
    });
}
});

1 个答案:

答案 0 :(得分:1)

看看这些东西https://stackoverflow.com/questions/10203872/cant-get-json-datastore-into-extjs-sencha-touch-chart-displays-error-cannot

  1. 在Web服务器上运行该示例,因为从文件系统加载JSON文件有时会导致问题。
  2. 按如下结构构建json数据

    {
        "data": [
            {
                "School": "Dukes",
                "wins": "3"
            },
            {
                "School": "Emmaus",
                "wins": "10"
            },
            {
                "School": "Maryland",
                "wins": "5"
            },
            {
                "School": "Virginia",
                "wins": "2"
            }
        ]
    }
    
  3. 使用以下数据存储

    window.store1 = new Ext.data.Store({
        model: 'Details',
        proxy: {
            type: 'ajax',
            url: 'GetDataset.json',
            reader: {
                root: 'data',
                type: 'json'
            }
        },
        autoLoad: true
    });