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 相关文章推荐
xml 封装与解析(javascript和C#中)
Jul 26 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
JavaScript实现切换多张图片
Jan 27 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)
2007/11/23 PHP
PHP开发框架总结收藏
2008/04/24 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
理解 JavaScript 预解析
2009/10/25 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
理解JSON:3分钟课程
2011/10/28 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
VUE重点问题总结
2018/03/19 Javascript
vue mounted组件的使用
2018/06/18 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
vue将data恢复到初始状态 && 重新渲染组件实例
2020/09/04 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Sublime开发python程序的示例代码
2018/01/24 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
Python descriptor(描述符)的实现
2020/11/15 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
公司新年寄语
2014/04/04 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL