Question

我在localhost上有这个JSon。

{
    "sucess": true,
    "total":150,
    "casa": [{
        "name": {
            "mentor": "stark"
            },
        "data":60
    },{
        "name":"baratheon",
        "data":50
    },{
        "name":"lannister",
        "data":40
    },{
        "name":"baratheon",
        "data":30
    },{
        "name":"greyjoy",
        "data":20
    },{
        "name":"tyrell",
        "data":10 
    }]
 }

这就是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: 'casas',
                    model: 'User',
                    autoLoad: true,
                    proxy: {
                        type: 'ajax',
                        url: 'lala1.json',
                        reader: {
                            type: 'json',
                            root: 'casa'
                        }
                    }
                });

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

每当我尝试显示导师的名字时，只需在饼图上的字段上显示[object Object]。我错过了什么？我已经在这里看了一些关于这个的帖子，但没有一个能解决我的问题，有人可以帮助我吗？

Answer 1

如果你可以改变你的json，改变它的结构看起来像extjs期望的那样：

"name": "stark",
"data":60

而不是

"name": {
    "mentor": "stark"
},
"data":60

如果您的json来自第三方来源，则必须在绘制图表之前转换数据。实现这一目标的一种方法是使用商店的load event转换数据，该商店将记录作为参数。

如何在饼图上显示嵌套的Json？

1 个答案: