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 相关文章推荐
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
vue中英文切换实例代码
Jan 21 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 Javascript
js实现滑动进度条效果
Aug 21 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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中的数组处理函数实例总结
2016/01/09 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
python之yield表达式学习
2014/09/02 Python
Python基于有道实现英汉字典功能
2015/07/25 Python
Python中str.format()详解
2017/03/12 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
总裁助理岗位职责
2014/02/17 职场文书
网络技术专业求职信
2014/02/18 职场文书
记者节感言
2015/08/03 职场文书
《开国大典》教学反思
2016/02/16 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
四年级作文之植物
2019/09/20 职场文书
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python