Extjs4用Firefox来显示柱形图无法显示渐变颜色

今天搞了个图表，遇到了一个很诡异的问题，搞了几个钟头都搞不掂，只能放弃……

是这样的，下图显示的柱状图的柱状为透明色，正常显示的话应该是渐变色的！

就为了这个柱形图表的渐变色，郁闷了很久！如果单独分出来，同是firefox，就能显示，会有如下效果：

内嵌到页面里面，没有颜色，变透明了，奇怪！

在IE浏览器里面打开，显示又正常！

布局是在火狐狸里面调试好的，在IE里面出现不够对齐的现象，所以不想用IE来进行开发调试，但是在火狐狸里面居然不能显示出颜色。你说是浏览器不兼容的问题吧，它又不像！因为独立分开又能在火狐狸里面显示，只是内嵌到里面不能显示而已。这又是个什么怪现象啊？！

 

把柱状的颜色改为红色，居然显示成这样：

可见无法显示正常可能是因为面板底色的问题了！

原来是自己想错了！不能这样设置的：

renderer: function (sprite, storeItem, barAttr, i) {
                console.log(i);
                barAttr.fill = 'color:#ff0000' ;
                return barAttr;
            }

要注意写成这样：

renderer: function (sprite, storeItem, barAttr, i) {
                console.log(i);
                barAttr.fill = 'rgb(14, 117, 56)' ;
                return barAttr;
            }

搞到最后，渐变效果还是搞不出，全部变成了透明效果，只能用单色来实现了。