EXTJS中不同面板中饼图和图例的连接方法

Question

Hello I am making a piechart in EXTJS. The legends of these charts are not displaying properly they are being cut off. Therefore i am making a piechart in one panel and just under that i am making another panel which would contain the legends.

My question is how do I connect the pie chart in one panel and showing the legend of this pie chart in another panel.

I am using EXTJS 4.2

I am made 2 panels one is under the other in a vbox positioning.

Answer 1

To connect a pie chart and its legend in different panels in ExtJS, you can use the following steps:

Create two panels, one for the pie chart and one for the legend.

In the pie chart panel, create a pie chart using the Ext.chart.PolarChart class.

In the legend panel, create a legend using the Ext.chart.legend.SpriteLegend class.

Use the "series" config property in the legend to specify the series associated with the pie chart.

Set the "docked" config property of the legend panel to "bottom" or "right" to dock it to the bottom or right of the pie chart panel.

Ext.define('MyApp.view.PieChartWithLegend', {
    extend: 'Ext.container.Container',
    xtype: 'piechartwithlegend',

    layout: {
        type: 'hbox',
        align: 'stretch'
    },

    items: [{
        xtype: 'polar',
        width: 500,
        height: 500,
        store: {
            fields: ['name', 'data1'],
            data: [{
                name: 'Item 1',
                data1: 14
            }, {
                name: 'Item 2',
                data1: 16
            }, {
                name: 'Item 3',
                data1: 14
            }, {
                name: 'Item 4',
                data1: 20
            }]
        },
        series: [{
            type: 'pie',
            xField: 'data1',
            donut: 30,
            highlight: true,
            style: {
                stroke: 'black',
                miterLimit: 1,
                lineCap: 'miter',
                lineWidth: 1
            },
            label: {
                field: 'name',
                display: 'rotate',
                contrast: true,
                font: '18px Arial'
            }
        }]
    }, {
        xtype: 'container',
        width: 100,
        layout: 'fit',
        items: [{
            xtype: 'spritelegend',
            docked: 'bottom',
            series: [{
                type: 'pie',
                store: {
                    fields: ['name', 'data1'],
                    data: [{
                        name: 'Item 1',
                        data1: 14
                    }, {
                        name: 'Item 2',
                        data1: 16
                    }, {
                        name: 'Item 3',
                        data1: 14
                    }, {
                        name: 'Item 4',
                        data1: 20
                    }]
                },
                label: {
                    field: 'name'
                }
            }]
        }]
    }]
});