Question

我在此链接中使用此pie chart example来显示饼图。

如何动态设置饼图并将饼图设为refresh？

Answer 1

动态创建图表： -

var chart = Ext.create('Ext.chart.Chart', {
    xtype: 'chart',
    animate: true,
    store: store1,
    shadow: true,
    legend: {
        position: 'right'
    },
    insetPadding: 60,
    theme: 'Base:gradients',
    series: [{
        type: 'pie',
        field: 'data1',
        showInLegend: true,
        donut: donut,
        tips: {
            trackMouse: true,
            renderer: function(storeItem, item) {
                //calculate percentage.
                var total = 0;
                store1.each(function(rec) {
                    total += rec.get('data1');
                });
                this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
            }
        },
        highlight: {
            segment: {
                margin: 20
            }
        },
        label: {
            field: 'name',
            display: 'rotate',
            contrast: true,
            font: '18px Arial'
        }
    }]
});

要刷新图表，您可以使用store.loadData方法。

参考url

Answer 2

要在饼图商店中加载动态数据，您可以使用reload()的loadData()，load()和store方法。

store.reload（）示例

store.reload({
    params : {
        userid : 1234
    }
});

store.load（）示例

store.load({
    scope: this,
    callback: function(records, operation, success) {
        // the Ext.data.operation.Operation object
        // contains all of the details of the load operation
        console.log(records);
    }
});

如果不需要设置回调范围，可以简单地传递一个函数：

store.load(function(records, operation, success) {
    console.log('loaded records');
});

store.loadData（）示例

var data= [{
    os: 'Android',
    data1: 68.3
},{
    os: 'Others',
    data1: 1.9
}];
store.loadData(data);

在 FIDDLE 中，我创建了一个演示版。希望这有助于/指导您实现您的要求。

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {
        /**
         * Returns a random integer between min (inclusive) and max (inclusive)
         * Using Math.round() will give you a non-uniform distribution!
         */
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        function createDyanmicData(store) {
            store.each(rec => {
                rec.set('data1', getRandomInt(20, 100));
            });
        }

        Ext.create({
            xtype: 'polar',

            tbar: ['->', {
                text: 'Refresh Chart',
                height: 35,
                padding: 5,
                margin:'0 10',
                style: {
                    background: 'green'
                },
                handler: function () {
                    createDyanmicData(this.up('polar').getStore())
                }
            }],

            title: 'Pie Chart Example',

            renderTo: Ext.getBody(),

            width: '100%',

            height: window.innerHeight,

            interactions: 'rotate',

            store: {
                fields: ['os', 'data1'],
                data: [{
                    os: 'Android',
                    data1: 68.3
                }, {
                    os: 'iOS',
                    data1: 17.9
                }, {
                    os: 'Windows Phone',
                    data1: 10.2
                }, {
                    os: 'BlackBerry',
                    data1: 1.7
                }, {
                    os: 'Others',
                    data1: 1.9
                }]
            },
            series: {
                type: 'pie',

                xField: 'data1',

                label: {
                    field: 'os',
                    display: 'inside',
                    calloutLine: true
                },

                showInLegend: true,

                highlight: true,

                highlightCfg: {
                    fill: '#ccc',
                    'stroke-width': 10,
                    stroke: '#fff'
                },

                tips: {
                    trackMouse: true,
                    renderer: function (storeItem, item) {
                        this.setTitle(storeItem.get('os') + ': ' + storeItem.get('data1') + '%');
                    }
                }
            }
        });
    }
});

Ext Js ChartsKitchenSink.view.charts.pie.Basic

2 个答案: