ExtJs纵坐标值重复问题的解决方法_Javascript教程-查字典教程网
ExtJs纵坐标值重复问题的解决方法
ExtJs纵坐标值重复问题的解决方法
发布时间:2017-01-14 来源:查字典编辑
摘要:写在前面,版本库:ExtJSLibrary3.3.1做图表的时候纵坐标很多值都是一样的,无意中发现下面的解决方法,自己测试是可以了,写出来以...

写在前面,版本库: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.解决前:

2.解决后:

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类