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

最新推荐文章于 2022-09-24 13:42:53 发布

原创最新推荐文章于 2022-09-24 13:42:53 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了在使用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}