Question

我通过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'
        }]
    });
}
});

Answer 1

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

在Web服务器上运行该示例，因为从文件系统加载JSON文件有时会导致问题。

按如下结构构建json数据

{
    "data": [
        {
            "School": "Dukes",
            "wins": "3"
        },
        {
            "School": "Emmaus",
            "wins": "10"
        },
        {
            "School": "Maryland",
            "wins": "5"
        },
        {
            "School": "Virginia",
            "wins": "2"
        }
    ]
}

使用以下数据存储

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

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

1 个答案: