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 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
jquery实现百叶窗效果
Jan 12 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
vue实现lodop打印功能的示例
Nov 11 Javascript
vue实现登录功能
Dec 31 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
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
chrome调试javascript详解
2015/10/21 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
javascript事件模型介绍
2016/05/31 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
python版本的仿windows计划任务工具
2018/04/30 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
Python3并发写文件与Python对比
2019/11/20 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
JAVA代码查错题
2014/10/10 面试题
C/C++程序员常见面试题二
2015/11/19 面试题
办公室内勤岗位职责范本
2013/12/09 职场文书
好军嫂事迹材料
2014/01/15 职场文书
员工生日活动方案
2014/08/24 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
东京审判观后感
2015/06/01 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书