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 相关文章推荐
javascript 弹出层组件(升级版)
May 12 Javascript
js获取和设置属性的方法
Feb 20 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
PHP实现文件下载详解
2014/11/27 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
实现PHP搜索加分页
2016/10/12 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
动态调用CSS文件的JS代码
2010/07/29 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
three.js 入门案例详解
2018/01/23 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
安装Python的教程-Windows
2017/07/22 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
韩国商务邀请函
2014/01/14 职场文书
人力资源主管职责范本
2014/03/05 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
安全生产演讲稿
2014/05/09 职场文书
敬老模范事迹
2014/05/21 职场文书
公司授权委托书范文
2014/09/21 职场文书
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL