Home >Web Front-end >JS Tutorial >Solution to the problem of duplicate ordinate values ​​in ExtJs_extjs

Solution to the problem of duplicate ordinate values ​​in ExtJs_extjs

WBOY
WBOYOriginal
2016-05-16 16:57:571112browse

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.

Copy code The code is as follows:

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:
Solution to the problem of duplicate ordinate values ​​in ExtJs_extjs
2. After solution:
Solution to the problem of duplicate ordinate values ​​in ExtJs_extjs
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn