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面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
简单实现js拖拽效果
Jul 25 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
js中实例与对象的区别讲解
Jan 21 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 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
Linux中为php配置伪静态
2014/12/17 PHP
php实现上传图片文件代码
2015/07/19 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
JQuery基础语法小结
2015/02/27 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
大学生实习期自我评价范文
2013/10/03 职场文书
职业生涯规划书基本格式
2014/01/06 职场文书
大学生的自我鉴定范文
2014/01/21 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
简单的大学生自我鉴定
2014/02/18 职场文书
风险评估实施方案
2014/03/09 职场文书
计算机实训报告总结
2014/11/05 职场文书
社区好人好事材料
2014/12/26 职场文书
优秀英文求职信范文
2015/03/19 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
怎么用Python识别手势数字
2021/06/07 Python
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL