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 相关文章推荐
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
JS中Array数组学习总结
Jan 18 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
动态调用css文件——jquery的应用
2007/02/20 Javascript
firefo xml 读写实现js代码
2009/06/11 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
python字符串替换示例
2014/04/24 Python
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
python实现人民币大写转换
2018/06/20 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
浙大网新C/C++面试解惑
2015/05/27 面试题
50道外企软件测试面试题
2014/08/18 面试题
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
实践单位评语
2014/04/26 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
2014年保洁工作总结
2014/11/24 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python
python单向链表实例详解
2022/05/25 Python
基于Python实现西西成语接龙小助手
2022/08/05 Golang