Question

当我运行index.html时，我只得到一个饼图，但没有颜色描述。任何人都可以告诉我如何将颜色符号轮廓如下所示

enter image description here

我的代码如下所示

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Ext.chart.series.Pie Example</title>
    <link rel="stylesheet" href="http://cdn.sencha.io/try/extjs/4.1.0/resources/css/ext-all-gray.css"/>
    <script src="http://cdn.sencha.io/try/extjs/4.1.0/ext-all-debug.js"></script>
    <script src="app.js"></script>
</head>
<body>
        <div id="myExample"></div>
</body>
</html>

app.js

Ext.onReady(function() {
    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data'],
        data: [{
            'name': 'metric one',
            'data': 10
        }, {
            'name': 'metric two',
            'data': 7
        }, {
            'name': 'metric three',
            'data': 5
        }, {
            'name': 'metric four',
            'data': 2
        }, {
            'name': 'metric five',
            'data': 27
        }]
    });

    Ext.create('Ext.chart.Chart', {
        renderTo: 'myExample',
        width: 500,
        height: 350,

        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) {
                    // calculate and display percentage on hover
                    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'
            }
        }]
    });
});

Answer 1

您忘了添加图例配置

...
height: 350,
legend: {
    position: 'right'
},
...

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Store

UPD：

Ext.define('myStore', {
    extend: 'Ext.data.Store',
    model: 'myModel',
    proxy: {
        type: 'ajax',
        api: {
            read: '/urlhere'
        },
        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success',
            totalProperty: 'total'
        }
    }
});

预期数据：{data：json array here，success：true / false，total：123}

如何使用extjs在饼图中引入符号轮廓

1 个答案: