extjs4 chart 座標軸都為Numberic時,座標不正確問題

bill1315發表於2013-01-11

在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}
 











相關文章