在使用 ExtJs 3.0 的 Chart 做一个 Stacked Bar 图形的时候,发现数据多的时候,每个条形的宽度会变的很小,大片的空间都是空的,很浪费,于是想通过样式来控制其宽度,代码如下:(取自 ExtJs examples 目录下的 stacked-bar-chart.js )
series: [{
xField: 'comedy',
displayName: 'Comedy',
style:{size: 10}
},{
xField: 'action',
displayName: 'Action',
style:{size: 15}
},{
xField: 'drama',
displayName: 'Drama',
style:{size: 20}
},{
xField: 'thriller',
displayName: 'Thriller',
style:{size: 30}
}]
显示效果如下:
可以看到,最后一段 'thriller' 列的宽度没生效。
找了很久也没有找到解决办法,考虑到 Extjs chart 是从 yui chart 来的,只好尝试看看 yui 的 chart 是不是也有这个问题,
修改代码如下:(取自 yiu 的 examples 目录下的 charts-stacked_clean2.html )
var seriesDef =
[
{
xField: "internetsales",
displayName: "Internet Sales", style:{size:30}
},
{
xField: "printsales",
displayName: "Print Sales", style:{size:50}
},
{
xField: "tvsales",
displayName: "Television Sales", style:{size:70}
}
];
显示效果如下,达到了我的目的。
问题是这是一个明显的bug,难道ExtJs的开发者没有发现?
另外,想尝试用yui的charts.swf文件替换ExtJs的charts.swf,发现不能使用,看来是ExtJs的开发人员修改过了charts.swf的源代码了。