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 相关文章推荐
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
理解JS绑定事件
Jan 19 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
vue中v-model动态生成的实例详解
Oct 27 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
重置Redux的状态数据的方法实现
Nov 18 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中常用编辑器推荐
2007/01/02 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
Python重新引入被覆盖的自带function
2014/07/16 Python
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
python学生管理系统
2019/01/30 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
Keras loss函数剖析
2020/07/06 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
中国跨境电商:Tomtop
2017/03/16 全球购物
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
车辆工程专业求职信
2014/06/14 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
学校2014年度工作总结
2014/12/06 职场文书
公务员年度考核评语
2014/12/31 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
node快速搭建后台的实现步骤
2022/02/18 NodeJs
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python