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 27 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
js实现烟花特效
Mar 02 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
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中COOKIES使用示例
2015/07/26 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
Javascript 二维数组
2009/11/26 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
理解javascript中的闭包
2017/01/11 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
Python语言描述连续子数组的最大和
2018/01/04 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
大学新生军训个人的自我评价
2013/10/03 职场文书
高中自我鉴定范文
2013/11/03 职场文书
策划助理岗位职责
2013/11/18 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
《独坐敬亭山》教学反思
2014/04/08 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
社区戒毒工作方案
2014/06/04 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript