Extjs 图表阴影答案

【问题标题】：Extjs chart shadowExtjs 图表阴影
【发布时间】：2011-11-09 02:52:22
【问题描述】：

我有以下代码来构建饼图。
问题是我没有阴影。
注意：如果图表配置，theme='Base'，那么饼图有阴影

Ext.define('ChartPanel', {
    extend: 'Ext.panel.Panel',
    //------------------CONSTRUCTOR  
    , constructor: function(externalConfigs) {
        externalConfigs = externalConfigs || {}; 

        var configs = {
            title: 'My panel',
            items: [
            {
                xtype: 'chart',
                store: myStore,
                width: '30%',
                series: [{
                    type: 'pie'
                        , field: 'persentage'
                        , shadow: 'sides'
                        , showInLegend: false
                        , donut: false
                        , renderer: function(sprite, record, attributes, index, store) {
                            if (record.data.description == 'option1') {
                                sprite.setAttributes({
                                    fill: 'url(#redGradient)',
                                    stroke: '#ffffff'
                                }, false);
                            } else if (record.data.description == 'option2') {
                                sprite.setAttributes({
                                    fill: 'url(#greenGradient)',
                                    stroke: '#ffffff'
                                }, false);
                            }
                        }
                   }]
                   , gradients: [{
                        id: 'redGradient',
                        angle: 45,
                        stops: {
                            0: { color: '#820000' },
                            100: { color: '#BD1E00' }
                        }                        
                    }, {
                        id: 'greenGradient',
                        angle: 0,
                        stops: {
                            0: { color: '#89AC10' },
                            100: { color: '#A1C22D' }
                        }
                    }]
                } 
            ]
            }

            Ext.apply(configs, externalConfigs);
            this.callParent([configs]); //Call the parent constructor
        }


    });

任何想法如何获得阴影？谢谢

【问题讨论】：

标签： charts extjs4 shadow extjs-chart

【解决方案1】：

在您的chart 定义中使用shadow: true（请参阅上一个链接中的文档以查看其他可能的选项）。（不在pie 定义内）。 Ext.chart.series.Pie 没有 shadow 配置属性。您需要在Ext.chart.series.Pie 中使用shadowAttributes。

【讨论】：

感谢您的回答。如果系列渲染器将属性设置为一个精灵，则 shadow:true 什么也不做。但我问你。我到底在哪里可以找到 shadowAttributes 选项？跨度>
这是一个非常好的问题。我最好的建议是查看 Ext.chart.series.Pie 的源代码，您会注意到它们使用以下选项：“stroke-width”：6，“stroke-opacity”：1，stroke：'rgb (200, 200, 200)'，翻译：{ x: 1.2, y: 2 }

【解决方案2】：

我发现了

return attributes;

渲染器内部是必不可少的。

【讨论】：