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压缩工具下载集合
Mar 06 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
jQuery中:input选择器用法实例
Jan 03 Javascript
jQuery中$.click()无效问题分析
Jan 29 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
jQuery实现简单评论区功能
Oct 26 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
实例讲解php实现多线程
2019/01/27 PHP
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
js选择器全面解析
2016/06/27 Javascript
jQuery操作cookie
2016/08/08 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
Python通过poll实现异步IO的方法
2015/06/04 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
几个MySql的面试题
2013/04/22 面试题
安全生产一岗双责责任书
2014/07/28 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
支教个人总结
2015/03/04 职场文书
成品仓管员岗位职责
2015/04/01 职场文书