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

Question

您好，我正在 EXTJS 制作饼图。这些图表的图例显示不正确，它们被截断了。 因此，我在一个面板中制作了一个饼图，而在其下方我正在制作另一个包含图例的面板。

我的问题是如何在一个面板中连接饼图并在另一个面板中显示该饼图的图例。

我正在使用 EXTJS 4.2

我制作了 2 个面板，一个在 vbox 定位中的另一个下方。

Answer 1

要在 ExtJS 中的不同面板中连接饼图及其图例，可以使用以下步骤：

创建两个面板，一个用于饼图，一个用于图例。

在饼图面板中，使用 Ext.chart.PolarChart class 创建一个饼图。

在图例面板中，使用 Ext.chart.legend.SpriteLegend class 创建一个图例。

使用图例中的“系列”配置属性来指定与饼图关联的系列。

将图例面板的“停靠”配置属性设置为“底部”或“右侧”以将其停靠在饼图面板的底部或右侧。

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