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 相关文章推荐
jquery文字上下滚动的实现方法
Mar 22 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
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
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
js 内存释放问题
2010/04/25 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
微信小程序前端promise封装代码实例
2019/08/24 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
Python with的用法
2014/08/22 Python
跟老齐学Python之折腾一下目录
2014/10/24 Python
Python函数返回值实例分析
2015/06/08 Python
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
如何利用python进行时间序列分析
2020/08/04 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
法学院毕业生求职信
2014/06/25 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
毕业横幅标语
2014/10/08 职场文书
家装业务员岗位职责
2015/04/03 职场文书
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android