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 05 Javascript
javascript 建设银行登陆键盘
Jun 10 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
初步了解javascript面向对象
Nov 09 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
js中let能否完全替代IIFE
Jun 15 Javascript
vue3中provide && inject的使用
Jul 01 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调用MySQL的存储过程的实现代码
2008/08/12 PHP
PHP小教程之实现链表
2014/06/09 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
Jquery 弹出层插件实现代码
2009/10/24 Javascript
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
Python类属性的延迟计算
2016/10/22 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
GC是什么?为什么要有GC?
2013/12/08 面试题
电大学习个人自我评价范文
2013/10/04 职场文书
记者岗位职责
2014/01/06 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
2014年财务部工作总结
2014/11/11 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
Oracle 触发器trigger使用案例
2022/02/24 Oracle
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB