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 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
JavaScript实现简单日历效果
Sep 11 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
B2K与车机的中波PK
2021/03/02 无线电
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
javascript下数值型比较难点说明
2010/06/07 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
介绍Python中的文档测试模块
2015/04/28 Python
python妹子图简单爬虫实例
2015/07/07 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
利用Python检测URL状态
2019/07/31 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
环境保护建议书
2014/08/26 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
李强为自己工作观后感
2015/06/11 职场文书
物业保洁员管理制度
2015/08/05 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB