最近在做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的属性来区分不同颜色代表的数据来源。可是当我设置了宽度之后,柱确实变短了。 可是他原本的轮廓还是存在的。 请问如何设置柱的宽度。或者说如何能够去掉这个轮廓。
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的属性来区分不同颜色代表的数据来源。可是当我设置了宽度之后,柱确实变短了。 可是他原本的轮廓还是存在的。 请问如何设置柱的宽度。或者说如何能够去掉这个轮廓。
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,从而可以取消图中某组柱的显示。 这时候柱只剩一个的时候他是不会居中的。 还有就是颜色的就算。 我这样写了颜色之后,一旦有取消某组柱的显示时,颜色就被打乱了。 求大神讲解。