ExtJs纵坐标值重复问题的解决方法


Posted in Javascript onFebruary 27, 2014

写在前面,版本库:Ext JS Library 3.3.1

做图表的时候纵坐标很多值都是一样的,无意中发现下面的解决方法,自己测试是可以了,写出来以备后查,以便他人查看。其他版本没测试过。有兴趣的朋友可以自己测试。

var chartStore;//图表数据 
Ext.onReady(function(){ //使用当前服务器的文件,如果没有这句话,默认会去adobe的站点取 
Ext.chart.Chart.CHART_URL = 'extjs/resources/charts.swf'; 
var json_reader = new Ext.data.JsonReader( { 
idProperty : "pointName", 
root : 'rows', 
totalProperty : "results", 
fields : [ { 
name : 'pointName' 
}, { 
name : 'faultCount', 
type : "int" 
}] 
}); 
//从后台取数据 
chartStore = new Ext.data.Store({ 
proxy : new Ext.data.HttpProxy({ 
url : 'loadColumnChart.do', 
method : 'POST' 
}), 
reader : json_reader 
}); 
chartStore.reload(); 
//柱状图面板 
var columnchartPanel = new Ext.Panel({ 
border :false, 
autoScroll : true, 
//title : '设备测点故障记录统计图', 
frame : true, 
renderTo : document.body, 
width: 800, 
height: 240, 
layout : 'fit', 
items : { 
xtype : 'columnchart', // 类型 
store : chartStore, 
xField : 'pointName', // X轴取值 
yField : 'faultCount', // Y轴取值 
yAxis : new Ext.chart.NumericAxis({ 
displayName : 'faultCount' 
//labelRenderer : Ext.util.Format.numberRenderer('0,0')//关键问题是这句,我把这句注释了就正常了 
}), 
tipRenderer : function(chart, record) { 
return record.data.pointName + '的故障次数为:' + 
Ext.util.Format.number(record.data.faultCount, '0,0'); 
}, 
series : [ {//列 
type : 'column', //类型可以改变(线)line 
displayName : 'faultCount', 
yField : 'faultCount', 
style : { 
color : 0x99BBE8 
} 
}] 
} 
}); 
//柱状图面板 
var leftPanel = new Ext.Panel({ 
title: '柱状图', 
region:'west', 
margins: '5 0 0 0', 
cmargins: '5 5 0 0', 
width: 850, 
minSize: 700, 
maxSize: 850, 
autoScroll:true,//设为true则内容溢出的时候产生滚动条,默认为false 
collapsible: true,//允许收缩 
items: columnchartPanel 
}); 
});

1.解决前:
ExtJs纵坐标值重复问题的解决方法 
2.解决后:
ExtJs纵坐标值重复问题的解决方法 
Javascript 相关文章推荐
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
mpvue写一个CPASS小程序的示例
Sep 04 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
原生js实现无缝轮播图
Jan 11 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
15个值得收藏的JavaScript函数
Sep 15 Javascript
flash遮住div问题的正确解决方法
Feb 27 #Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 #Javascript
js中settimeout方法加参数的使用实例
Feb 27 #Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 #Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 #Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 #Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 #Javascript
You might like
php+mysql查询优化简单实例
2015/01/13 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
javascript history对象详解
2017/02/09 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
智能电子应届生求职信
2013/11/10 职场文书
会计应聘求职信范文
2013/12/17 职场文书
学校岗位设置方案
2014/01/16 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
升职自荐信怎么写
2015/03/05 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python