ExtJs纵坐标值重复问题的解决方法

221 阅读 0 评论 146 点赞

我是靠谱客的博主阳光爆米花，最近开发中收集的这篇文章主要介绍ExtJs纵坐标值重复问题的解决方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

写在前面，版本库：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 
}); 

}); 