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

drawing piechart using extjs from json file

本文关键字:绘制 extjs JSON 文件 使用      更新时间:2023-09-26

我已经成功地通过 ajax 调用使用 extjs 和 JSON 值绘制了一个饼图。 但是我无法通过从名为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'
        }]
    });
}
});
看看

这些东西 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
    });