最近在做ext的columnChart代码如下。Ext.define("column.view.Chart", {
         extend : "Ext.chart.Chart",
         alias : "widget.Chart",
         /**
 * 柱形图
 */
           animate:true,
           store:"Main",
           width:400,
           style: 'background:#ccc',
           legend: {
                position: 'right'
           },
           axes:[{
            type:'Numeric',
            fields:['chineseMark','mathMark','englishMark'],
            title:'1班各科及格人数',
            position:'left',
            minimum:0,
            grid:true
            },{
            type:'Category',
            position:'bottom',
            fields:['term'],
            title:'学期',
            grid:true
            }],
            series:[{
             style: {
              fill:['#77AECE'],
                 width:15
         },
            axis:'left',
            type:'column',
            xField:['term'],
            yField:['chineseMark','mathMark','englishMark'],
            title:['语文成绩','数学成绩','英语成绩'],
            highlight: true,
             tips: {
               trackMouse: true,
               width: 100,
               height: 28,
               renderer: function(storeItem, item) {
            this.setTitle("及格人数:"+item.value[1] + "人");
    }
             }
            }]      });
在series的style中是属性fill是设置柱的颜色的属性。 可是这样写所有的柱形图都会改变成同一个颜色。 而且这里无法接收一个数组。 请问。 想根据个人需求更改柱的颜色应该怎样实现。
style中我写的另外一个属性是设置柱的宽度的。写过columnchart的人应该发现了。 我在x轴同一个点上显示的柱是三个,也就是 'chineseMark','mathMark','englishMark' 这三个的数据。 由于无法区分,所以我加了legend的属性来区分不同颜色代表的数据来源。可是当我设置了宽度之后,柱确实变短了。 可是他原本的轮廓还是存在的。 请问如何设置柱的宽度。或者说如何能够去掉这个轮廓。

解决方案 »

  1.   

    经过一上午的查找和研究发现了以下一段代码。
    renderer: function(sprite, record, attr, index, store) {
                        var value = index%3;
                        var color = ['rgb(213, 70, 121)', 
                                     'rgb(44, 153, 201)', 
                                     'rgb(146, 6, 157)'
                                     ][value];
                        return Ext.apply(attr, {
                         width:20,
                            fill: color
                        })},
    这是serise的renderer,轮廓问题解决了。 可是由于我加上了legend,从而可以取消图中某组柱的显示。 这时候柱只剩一个的时候他是不会居中的。 还有就是颜色的就算。 我这样写了颜色之后,一旦有取消某组柱的显示时,颜色就被打乱了。 求大神讲解。