饼图不使用外部 json 文件绘制 - extjs

Question

在下面的代码中，我尝试使用extjs 绘制饼图，但饼图未显示......

当我通过 ajax 传递 json 时，内联它的工作，但是当我通过一个文件时它不工作

谁能告诉我一些解决方法

myjson.json

{"graphobject":[{"name":"ABC","data":2},
                {"name":"DEF","data":12},
                {"name":"GHI","data":3},
                {"name":"JKL","data":3}]
}

app.js

Ext.onReady(function() { 

    Ext.define('User', {
                extend: 'Ext.data.Model',
                fields: [ {
                    name: 'name',
                    type: 'string'
                }, {
                    name: 'data',
                    type: 'int'
                }]
            });

            var store= Ext.create('Ext.data.Store', {
                    storeId: 'user',
                    model: 'User',
                    autoLoad: true,
                    proxy: {
                        type: 'ajax',
                        url: 'C:/myjson.json',
                        reader: {
                            type: 'json',
                            root: 'graphobject'
                        }
                    }
                });

       Ext.create('Ext.chart.Chart', {
            renderTo: 'myExample',
            width: 450,
            height: 320,
            legend: {
                position: 'right'
            },
            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'
                }
            }]
        });
 });

index.html

:
     <div id="myExample"></div>
:

Answer 1

你好，这里是 extjs 中的工作饼图。试试看：

        {
        xtype:'portal',
        margins:'35 5 5 5',
        items:[{
            columnWidth:1,
            style:'padding:10px 0 10px 10px;',
            items:[{
                title: 'Events Graph',
                tools: tools,
                height:350,
                id:"eventGraph",
                items :[{
                        store: pieEventGgaph(),
                        xtype: 'piechart',
                        id:'pieEventChart',
                        dataField: 'count',
                        categoryField: 'event',
                        series: [{
                            style: {
                                colors: ["#FC870A","#03AFFF","#99E329","#DD36EC","#9F0CBB","#CCA105","#FC870A","#03AFFF","#D91FF2", "#29E291"]
                            }
                        }],
                        listeners: {
                            beforerefresh: function(chart) {
                                return Ext.isDefined(chart.swf.setDataProvider);
                            }
                        },
                        // extra styles get applied to the chart defaults
                        extraStyle:
                        {
                            legend:
                            {
                                display: 'bottom',
                                padding: 5,
                                font:
                                {
                                    family: 'Tahoma',
                                    size: 15
                                }
                            }
                        }}]
            }]
        }]
   }

这里是商店代码：

function pieEventGgaph(){
    var pieEventGgaph = new Ext.data.Store({
        autoLoad:true,
        proxy: new Ext.data.HttpProxy({
            url: '../xxxx/xxxxx',
            timeout :requestTimeOut
        }),
        reader: new Ext.data.JsonReader({
            results: 'event',
            root: 'items',
            id: 'id'
        },
        [
        {
            name: 'count'
        },
        {
            name: 'event'
        }

        ]    
        ),
        listeners: {

            beforeload: function(store, operation, options){
              // before load
            },
            load: function () {
               // after load
            }
        }

    });
    return pieEventGgaph;
}