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

Question

when i runs the index.html i'm getting only a pie chart but with no color description . 当我运行index.html时，我只会得到一个饼图，而没有颜色描述。 can anyone please tell me how bring the color Symbol-outline like as shown below 谁能告诉我如何带颜色符号轮廓，如下所示

在此处输入图片说明

my code is as given below 我的代码如下

index.html 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 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

You forgot to add legend config 您忘记添加图例配置

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

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

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

expected data: {data: json array here, success: true/false, total: 123} 预期数据：{数据：此处为json数组，成功：是/否，总计：123}

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-09-12 05:59:18

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-09-12 05:59:18

解决方案1
0 已采纳 2013-09-12 05:59:18