Extjs_chart_columnchart example full version

/**-Print the log start -*/
Ext. namespace ("");
Isdebug = true;
/**
* Log Mode
*
* Usage log ("blabla: {0}, blabla: {1}", obj0, obj1)
*
* @ Param {} format // format.
*/
A. log = function (Format ){
If (! Isdebug) {return;} // used only in debug
Try {
If (arguments. Length <2) {// print directly
Console. Log (format );
} Else {
VaR Params = array. Prototype. Slice. Call (arguments, 1), PS = [format];
Ext. Each (Params, function (OBJ ){
PS. Push (obj. filteroptre? "[Ext control," + obj. getxtype () + "]": Ext. encode (OBJ); // ext control, do not print, avoid memory overflow
});
Console. Log (string. format. Apply (window, PS ));
}
} Catch (e) {}// ignore error, which may be in IE or production environment
}
/**-Print the log end -*/

/** Introduce Flash files */
Ext.chart.chart.chart_urlw.'charts.swf ';

/** Namespace */
Ext. NS ("app. Chart ");

/** Program entry */
Ext. onready (function (){
New app. Chart. bzfcolumnchart (); // Note: use the new format!
});

App. Chart. bzfcolumnchart = ext. Extend (ext. Panel ,{
Title: "The score column of the standard score for students in the school year 2011-2012 is" end_ OK? ",
Frame: True,
Iconcls: "chart ",
Renderto: Ext. getbody (),
Width: 700,
Height: 300,
Layout: 'fit ',
/** Initialize the component */
Initcomponent: function (){
Ext. Apply (this ,{
Items :[{
Xtype: 'columnchart ',
Store: This. getstore (),
Xfield: 'ksmc ',
URL: 'charts.swf ',
Series: This. getseries (),
Chartstyle: This. chartstyle
}]
});
App. Chart. bzfcolumnchart. superclass. initcomponent. Call (this );
},

/** Raw data */
Getchartdatas: function (){
VaR DATA = [
{
"Ysf": 93,
"Ksmc": "last semester, last semester, first-grade midterm exam, 2011-2012 ",
"Bzf": 481.025199206007,
"Bjmc": "111 ",
"Tglv ":"",
"Ksrq": "2011-11-07"
},{
"Ysf": 95.2923076923077,
"Ksmc": "last semester, last semester, last year, last year ",
"Bzf": 500.334870366218,
"Bjmc": "111 ",
"Tglv": "4.0143% ",
"Ksrq": "2012-02-05"
},{
"Ysf": 97.0820512820513,
"Ksmc": "last semester, last semester, first-grade midterm exam, 2011-2012 ",
"Bzf": 515.100108417183,
"Bjmc": "112 ",
"Tglv ":"",
"Ksrq": "2011-11-07"
},{
"Ysf": 95.0461538461539,
"Ksmc": "last semester, last semester, last year, last year ",
"Bzf": 495.658860100003,
"Bjmc": "112 ",
"Tglv": "-3.7743% ",
"Ksrq": "2012-02-05"
},{
"Ysf": 95.7333333333333,
"Ksmc": "last semester, last semester, first-grade midterm exam, 2011-2012 ",
"Bzf": 503.87469237681,
"Bjmc": "113 ",
"Tglv ":"",
"Ksrq": "2011-11-07"
},{
"Ysf": 95.5641025641026,
"Ksmc": "last semester, last semester, last year, last year ",
"Bzf": 504.006269533779,
"Bjmc": "113 ",
"Tglv": "0.0261% ",
"Ksrq": "2012-02-05"
},{
"Ysf": 97.7333333333333,
"Ksmc": "last semester, last semester, first-grade midterm exam, 2011-2012 ",
"Bzf": 603.87469237681,
"Bjmc": "114 ",
"Tglv ":"",
"Ksrq": "2011-11-07"
},{
"Ysf": 99.5641025641026,
"Ksmc": "last semester, last semester, last year, last year ",
"Bzf": 684.006269533779,
"Bjmc": "114 ",
"Tglv": "0.0261% ",
"Ksrq": "2012-02-05"
},{
"Ysf": 80.7333333333333,
"Ksmc": "last semester, last semester, first-grade midterm exam, 2011-2012 ",
"Bzf": 303.87469237681,
"Bjmc": "115 ",
"Tglv ":"",
"Ksrq": "2011-11-07"
},{
"Ysf": 79.5641025641026,
"Ksmc": "last semester, last semester, last year, last year ",
"Bzf": 284.006269533779,
"Bjmc": "115 ",
"Tglv": "0.0261% ",
"Ksrq": "2012-02-05"
}
];
Return data;
},

/**
* Function: determines whether ksmc already exists and whether the same name of the exam already exists.
* @ Param {} newdatas put the assembled data array.
* @ Param {} ksmc exam name.
* @ Return:-1 is returned if no return exists. If yes, the subscript sequence number is returned.
*/
Getksmcindex: function (newdatas, ksmc ){
For (VAR I = 0, size = newdatas. length; I <size; I ++)
{
If (newdatas [I] ["ksmc"] = ksmc)
{
Return I;
}
}
Return-1;
},

/**
* Function: Assemble data.
* Train of Thought: Get data-> collect cyclic data, fetch ksmc for determination-> assemble data based on ksmc.
* @ Return {}
*/
Dosomething: function (){
VaR olddatas = This. getchartdatas (); // get the original data.
VaR newdatas = []; // used to store the new data array.
VaR J = 0;
For (VAR I = 0, size = olddatas. length; I <size; I ++)
{// Read data cyclically.
VaR ksmc = olddatas [I] ["ksmc"]; // obtain the exam name.
VaR Index = This. getksmcindex (newdatas, ksmc); // determines whether the exam name already exists in the new data array. If so, its subscript is returned.
If (Index =-1)
{// The exam name does not exist.
Newdatas [J] = {"ksmc": ksmc}; // Note: The JSON object is added in this way.
Newdatas [J] [String. format ("bzf {0}", olddatas [I] ["bjmc"])] = olddatas [I] ["bzf"]; // Add a JSON object. Note that it is an unordered "'name/value' pair" set.
J ++ // auto-increment 1 to add different exam names.
} Else {
Newdatas [Index] [String. Format ("bzf {0}", olddatas [I] ["bjmc"])] = olddatas [I] ["bzf"];
}
}

/** Debug: print the output newdatas *//*
Ext. Each (newdatas, function (d ){
For (var p in D)
{
Alert (p + ":" + d [p]);
}
Alert ("--- A --- B --- C ---");
})
Alert ("assembled Data Length:" + newdatas. Length );*/

Return newdatas;
},

/** Obtain the store's Fields
* Note: The field name should be obtained by repeating the new data array.
**/
Getstorefields: function (){
VaR newdatas = This. dosomething (); // explanation: Get the assembled data.

// Note: the fields field in store is obtained cyclically.
VaR storefields = [];
If (newdatas. length> 0)
{
Ext. Each (newdatas [0], function (d ){
For (var f in D)
{
Storefields. Push (f );
}
})
}
// Print the diary:
A. Log ("storefields data: {0}", storefields );//??? Why not display it ???
Return storefields;
},

/** Get series */
Getseries: function (){
VaR newdatas = This. dosomething (); // explanation: Get the assembled data
VaR seriessjz = [];
If (newdatas. length> 0)
{
For (VAR s in newdatas [0])
{
If (s! = "Ksmc ")
{
Seriessjz. Push ({
Displayname: S. substring (3) + "class", // Note: You can use the string substring (START, end) to cut the string.
Yfield: S,
Style :{
Mode: 'stretch'
}
});
}
}
}

A. Log ("The yfield value array in series is: {0}", seriessjz)

Return seriessjz;
},

/** Get store */
Getstore: function (){
VaR store = new Ext. Data. jsonstore ({
Fields: This. getstorefields (), // Description: Reference directly.
// Fields: ['ksmc ', 'bzf111', 'bzf112', 'bzf113'],
Data: This. dosomething ()
// Data: This. getdatas ()
});
Return store;
},

/** Reminder: the data format of the assembled store data *//*
Getdatas: function (){
VaR DATA = [
{"Ksmc": "last semester, last semester, first-grade midterm exam, 2011-2012 ",
"Bzf111": 481.025199206007,
"Bzf112": 515.100108417183,
"Bzf113": 503.87469237681 },

{"Ksmc": "last semester, last semester, last year, last year ",
"Bzf111": 500.334870366218,
"Bzf112": 495.658860100003,
"Bzf113": 504.006269533779}
];
Return data;
},*/

/* Series :[{
Displayname: 'class 11 (1 )',
Yfield: 'bzf111 ',
Style :{
Mode: 'stretch ',
Color: 0x15428b
}
},{
Displayname: 'class 11 (2 )',
Yfield: 'bzf112 ',
Style :{
Mode: 'stretch ',
Color: 0x99bbe8
}
},{
Displayname: 'class 11 (3 )',
Yfield: "bzf113 ",
Style :{
Mode: 'stretch ',
Color: 0xdfe8f6
}
}], */
Chartstyle: {padding: 10, // fill.
Animationenabled: True,
Legend: {// bar description text.
Display: 'top ',
Font :{
Hold: True
}
},
Font: {// set the X axis and Y axis font.
Name: 'tahoma ',
Color: 0x444444,
Size: 11
},
Datatip: {// The prompt box is displayed.
Padding: 5,
Border: {// border settings.
Color: 0x99bbe8,
Size: 1
},
Background :{
Color: 0xdae7f6,
ALPHA:. 9 // transparency.
},
Font: {// font setting.
Name: 'tahoma ',
Color: 0x15428b,
Size: 10,
Hold: True
}
}}
});

Ext. Reg ("bzfcolumnchart", app. Chart. bzfcolumnchart );