Write it in the previous section, version library: Ext JS Library 3.3.1
When making a chart, many vertical coordinate values are the same. I accidentally discovered the following solution and it is OK to test it yourself. Write it out for later checking so that others can view it. Other versions have not been tested. Friends who are interested can test it themselves.
The code copy is as follows:
var chartStore;// Chart data
Ext.onReady(function(){
//Use the current server file. If this is not the case, you will go to the adobe site to retrieve it by default.
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"
}]
});
//Fetch data from the background
chartStore = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'loadColumnChart.do',
method : 'POST'
}),
reader: json_reader
});
chartStore.reload();
//Bar chart panel
var columnchartPanel = new Ext.Panel({
border :false,
autoScroll : true,
//title: 'Equipment test point fault record statistics',
frame : true,
renderTo : document.body,
width: 800,
height: 240,
layout : 'fit',
items: {
xtype: 'columnchart', // Type
store: chartStore,
xField: 'pointName', // X-axis value
yField: 'faultCount', // Take the value of the Y axis
yAxis : new Ext.chart.NumericAxis({
displayName : 'faultCount'
//labelRenderer: Ext.util.Format.numberRenderer('0,0')//The key problem is this sentence. It's normal if I commented on this sentence.
}),
tipRenderer : function(chart, record) {
return record.data.pointName + 'The number of failures 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
}
}]
}
});
//Bar chart panel
var leftPanel = new Ext.Panel({
title: 'His chart',
region:'west',
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: 850,
minSize: 700,
maxSize: 850,
autoScroll:true,//Set true, a scroll bar will be generated when the content overflows, and the default is false
collapse: true, // Allow shrinkage
items: columnchartPanel
});
});
1. Before resolution:
2. After resolution: