extjs4 chart 坐标轴都为Numberic时,坐标不正确问题

本文详细介绍了在使用ExtJS4绘制图表时,遇到轴范围只显示部分数据的问题,并提供了调整轴范围、tick步长和避免计算prettyNumbers的方法,确保系列数据完整填充图表区域。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在extjs4中,使用图表chart,当axis都为Numberic时(type='Numberic'),绘制出来的图形只集中在图形的一部分。

于是通过指定maximum,minimum来使series绘满整个图形区域,但是坐标轴的最大值却不是maximum,查看extjs 源码,发现小数相减时出现了问题(不知道为什么小数相减后面有很长的小数位数),修改

Draw.js里snapEnds方法,var step=(to-from).toFixed(10)/stepsMax,  

Axis.js里calcEnds方法out.steps=Math.ceil(out.to-out.form).toFixed(10)/out.step);

另外majorTickSteps须指定,不然extjs 计算出来的也有问题。(在draw.js里面如果指定maximum,minximun,majorTickSteps则不计算prettyNumbers,否则extjs会计算出值 ,值step会出问题)

在MVC,contols里loadChart,具体代码如下:

var chart=Ext.getCmp('chart');
store.load({
   callback:function(records,operation,success){

             if(success)
             {    
		var axesItem=chart.axes.items;
		var seriesItem=chart.series.items;
		var realMax=store.max('realValue');//取最大值,最小值
		var realMin=store.min('realValue');
		var xMax=store.max('XValue');		
		var xMin=store.min('XValue');		
		axesItem[0].maximum=realMax;		
		axesItem[0].minimum=realMin;		
		axesItem[1].maximum=xMax;		
		axesItem[1].minimum=xMin;		
		axesItem[0].majorTickSteps=10;//须指定		
		axesItem[1].majorTickSteps=10;		
		chart.redraw();	    
	     }
       }

})
附json:{data:[{'realValue':7.501,'xValue':5.0},{'realValue':7.507,'xValue':5.004},{'realValue':7.516,'xValue':5.01},{'realValue':7.525,'xValue':5.016},{'realValue':7.534,'xValue':5.022},{'realValue':7.543,'xValue':5.028},{'realValue':7.606,'xValue':5.07},{'realValue':7.613,'xValue':5.075}],'success':true}
 












                
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值