extjs4 chart 坐标轴都为Numberic时,坐标不正确问题
2013-01-11 15:15
260 查看
在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,具体代码如下:
于是通过指定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}
相关文章推荐
- C#中的chart横坐标显示日期和时间格式问题
- 关于通过GPS模块获取的坐标数据无法在Google地图上正确标记的问题说明
- Extjs学习 图表Chart 坐标轴组件详解(axes)
- Extjs 表格横坐标显示问题
- DateTime在ExtJs中无法正确序列化的问题
- ExtJs纵坐标值重复问题的解决方法
- DateTime在ExtJs中无法正确序列化的问题
- 解决extjs中chart显示不下legend的问题
- 解决extjs中chart显示不下legend的问题
- [原]ExtJS与FusionChart - 在ExtJS框架中使用FusionChart的一点问题
- DateTime在ExtJs中无法正确序列化的问题
- 解决extjs中chart显示不下legend的问题
- 解决 Microsoft Chart 控件横坐标显示不全的问题
- 关于通过GPS模块获取的坐标数据无法在Google地图上正确标记的问题说明
- QtChart官方自带example(Callout)X轴坐标逆序后遇到的问题,求大神指点
- 解决extjs中chart显示不下legend的问题
- 解决MFC“由于应用程序配置不正确,应用程序未能启动……”错误提示的问题
- 调用系统函数引起的core dump问题------错误地调用了正确的系统函数