Written in front, version library: Ext JS Library 3.3.1
When making charts, many values of the ordinate are the same. I accidentally discovered the following solution. You can test it yourself. I wrote it down for preparation. Check it later so others can see it. Other versions have not been tested. Interested friends can test it themselves.
var chartStore;//Chart data
Ext. onReady(function(){
//Use the file of the current server. If there is no such sentence, it will go to Adobe's site by default to get
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"
}]
});
//Get data from the background
chartStore = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'loadColumnChart.do',
method : 'POST'
}),
reader : json_reader
});
chartStore.reload();
//Column Chart Panel
var columnchartPanel = new Ext .Panel({
border : false,
autoScroll : true,
//title : 'Equipment measuring point fault record statistical chart',
frame : true,
renderTo : document.body ,
width: 800,
height: 240,
layout : 'fit',
items : {
xtype : 'columnchart', // Type
store : chartStore,
xField : 'pointName', // X-axis value
yField : 'faultCount', // Y-axis value
yAxis : new Ext.chart.NumericAxis({
displayName : 'faultCount'
//labelRenderer: Ext.util.Format.numberRenderer('0,0')//The key problem is this sentence, I commented this sentence and it is normal
}),
tipRenderer: function (chart, record) {
return record.data.pointName 'The number of faults is:'
Ext.util.Format.number(record.data.faultCount, '0,0');
} ,
series : [ {//Column
type : 'column', //The type can be changed (line) line
displayName : 'faultCount',
yField : 'faultCount',
style : {
color : 0x99BBE8
}
}]
}
});
//Histogram panel
var leftPanel = new Ext.Panel( {
title: 'Histogram',
region:'west',
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: 850 ,
minSize: 700,
maxSize: 850,
autoScroll:true,//Set to true to generate a scroll bar when the content overflows, the default is false
collapsible: true,//Allow shrinking
items: columnchartPanel
});
});
1. Before solution:
2. After solution: