日期:2014-05-16  浏览次数:20342 次

ExtJS报表设置Y轴的最小值和最大值

用ExtJS生成报表的时候,如果y轴的值太小的话就看不到数据了,就会造成一种假象,给人一种错觉就是出错了,只看到x轴,看不到y轴和报表里面的内容,其实报表已经生成了,只是看不到而已,所以需要修改y轴的最小值和最大值。

function generateData() {
?var data = [];
?for (var i = 0; i < 12; ++i) {
??data.push([Date.monthNames[i],
????(Math.floor(Math.random() * 11) + 1) * 100]);
?}
?return data;
}

Ext.onReady(function() {
???var store = new Ext.data.ArrayStore({
??????fields : ['month', 'hits'],
??????data : generateData()
?????});

???new Ext.Panel({
??????width : 700,
??????height : 400,
??????renderTo : document.body,
??????title : 'Column Chart with Reload - Hits per Month',
??????tbar : [{
?????????text : 'Load new data set',
?????????handler : function() {
??????????store.loadData(generateData());
?????????}
????????}],
??????items : {
???????xtype : 'columnchart',
???????store : store,
???????yField : 'hits',
???????url : '../../resources/charts.swf',
???????xField : 'month',
???????xAxis : new Ext.chart.CategoryAxis({
??????????title : 'Month'
?????????}),
???????yAxis : new Ext.chart.NumericAxis({
??????????title : 'Hits',
??????????minimum : 1,
??????????maximum : 1500
?????????}),
???????extraStyle : {
????????xAxis : {
?????????labelRotation : -90
????????}
???????}
??????}
?????});
??});

其中红色字体部分用于控制Y轴的最小值和最大值。