EXTJS4 "Charts" Lookup properties __js

1. Configuration parameters

{        xtype: ' Panel ',         layout: ' Fit ',         title: ' Trend chart ',        //bodystyle: ' Background: #ffc;
padding:10px ',         height:250, width:1000,         forcefit:true,        //frame:true,       items: {   &nbs P             ID: ' Xtyxqk_qushitu_chart ',                 xtype: ' Chart ',   //set chart type                & nbsp Style: ' Background: #000 ',                 animate:true,   //start loading whether animation                  shadow:true,  //plus Shadow Automatically creates a Ext.shadow, or a string representing Ext.Shadow.mode shadow display   &Nbsp;              store:states,//data object          & nbsp;      legend: {position: ' Top ', Boxstroke: ' border:0px; ', Labelfont: ' 11px Helvetica '},//Display column type title Or when the title of the content    defaults to false   if set to true   default position-bottom                //axes: axle                  axes: [                              &N bsp;  {                                        type: ' Numeric ',   //digital type axis                               &N bsp;         position: ' Left',//docking position                                         fields: [' Huoyueyonghushu ', ' Crmshibaishu '],//y axis coordinate data, will take the maximum value                             &N Bsp           label: {   //Axis data text display    such as label: {rotate: {degrees:31 5}} rotate 315°                                              renderer: Ext.util.Format.numberRenderer (' 0 ')                             },                                         //title: ' y-coordinate ',                                         minimum:0,  // Starting points default 0                          & 
nbsp             grid:true  //Display background table against         &  nbsp;                      }, {                                 &N bsp;      type: ' Category ',                                        position: ' Bottom ', & nbsp                                    & nbsp  //title: ' Month ',                       & nbsp;                fields: [' Xuhao '],      & nbsp                             &N bsp;   grid:true,                                         label: {        & nbsp;                           &NB sp;      //rotate: {                  degrees:315             },                                           renderer:function (LB L) {//This is a lot of demand and then less display x axes worth                                                   & nbsp       var count = ext.getcmp (' Xtyxqk_qushitu_chart ') .store.data.items.length;                               & nbsp                          var num1 = parseint (COUNT/12);                       & nbsp;      &NBsp                          count% 2 & Gt 0? num1++: ';                        & nbsp                             & Nbsp;  return lbl% NUM1 = 0? LBL: ';                          & nbsp;                     }     & nbsp;                           &NB sp;      }                                 }                  ],             Series: [     &nbs p;      //Vertical bar content                          {                       &
nbsp
 Type: ' column ',                        Axis: ' Left ',//designated y-axis    is the left-hand side of this                          highlight:true,//mouse Move up to highlight               & nbsp;         Tips: {//Bar tip version                              trackmouse:true,//mouse trigger       &nbs P          &Nbsp;          width:140,                             height:28,            &nbs P               renderer:function (Storeitem, item) {//storeitem This data item (x, Y value)                                           //this.settitle (storeitem.get (' name ') + ': ' + st Oreitem.get (' data1 '));                                     //this.settitle (item.value[0] + ': ' + item.value[1]); nbsp                            & 
 nbsp This.settitle (Storeitem.get (' RIQi ') + ': ' + item.value[1];                     &n Bsp     }                      &
 nbsp },                        title: [' Number of active users ', ' CRM failed users ', ' Speed up failed users ', ' less bandwidth users '],//column title and front legend corresponding if not set then field name            &N bsp;            label: {//pillar above text                             display: ' Insideend ',                             ' text-anchor ': ' Middle ', & nbsp                           field: [' Huoyueyonghushu ', ' CRMsHibaishu '],                             Renderer:function (LBL) {                  &nb Sp              var count = ext.getcmp (' Xtyxqk_qushitu_chart '). store.data.items.length;                                return count <= 12? LBL: ';                          & nbsp
 },                            Orientation: ' Vertical ',//show direction                     & nbsp;       Color: ' #333 '                         },                 & nbsp;       xfield: ' Xuhao ',                         Yfield: [' Huoyueyonghushu ', ' Crmshibaishu ']          
          }                   ]      }   }

1.1 Annotations:

Several major elements of the chart:
1, coordinates: Up, down, left, right.
types of coordinates, numbers, classification ...
Coordinates contain the coordinates that need to be displayed, the style of the bound field
coordinate values, such as rotation, font size,
maximum format coordinates, minimum value, whether to display
text 2 next to grid coordinates,
chart: Histogram, line chart, dot chart, pie chart, area chart, disk table diagram , Radar map ...
Icon type
chart x, the y axis corresponding to the field
icon on the display of text, text style, position
mouse to move up to display the message
3, style
4, data
axes: Used to configure coordinates, you can configure multiple coordinates.
Type: Configures the types of coordinates. Generally used is numeric, categoryposition: Configure the coordinates of the location, such as: The next to the left and right fields: You can configure multiple fields to set the value of the coordinates displayed. In fact, this configuration and series in the yfiled configuration items are not related to the label: You can configure how the text is displayed. The value of the field is displayed by default. For example, set the label rotation to a certain degree label: {
rotate: {
degrees:315
}
}title: Configure coordinates to display Titlegrid: Set the style of the grid. For example, set the transparency of the grid, style and so on. Grid: {//Set grid color value
odd: {
opacity:1,
fill: ' #ddd ',
stroke: ' #bbb ',
' stroke-width ': 1
}< C25/>}minimum: The minimum value of the coordinates can be configured. Of course there will be the corresponding maximum value maximum. You can work with majorticksteps (the master scale, the total number of ticks configured), Minorticksteps (sub scale, in each main can be a minor tick.) For example, configuration 10, the number is not increased by 10, session one time scale)
series: Used to configure chart type
: Configure the types of charts, there are many types of charts. Each chart has its own unique configuration item axis: relative to which coordinates. Because there are multiple coordinates, the height of the chart, there is always a reference. Highlight: Sets the mouse to move to the top of the chart and whether it is highlighted. But this reaction is slow. Tips: Set the pointer when you move the mouse over the chart label: sets the text displayed on the chart. You can set the position and style of the text. But not every chart has this configuration item. Xfield: Sets the field that the X coordinates bind to. Because axes sets the value of the coordinates, the value of the field bound must be in the axes coordinate value. Yfield: Sets the y-coordinate-bound field.

2. A simple one-dimensional charts demo is:

var Chartgrid = ext.create (' Ext.grid.Panel ', {
    	fields:[' gridyear ', ' gridnum '],
    	columns:[
    	     {header: ' Year ', Dataindex: ' Gridyear ', width:100}, 
    		 {header: ' Patent application ', Dataindex: ' Gridnum ', width:100}
    	]
    	
    	
    };
  	

Line chart var chartnumber1 = ext.create (' Ext.chart.Chart ', {height:400, width:800, Animate:true, Shadow:true, Store:panelstore1, Style: ' Background: #fff ', axes:[{//coordinate type: ' Numeric ', dashsi  ze:10,//Axis Front navigation bar length position: ' Left ', fields:[' prestatics ', Minimum:mini, Maximum:maxi, grid: {//Odd line odd: {opacity:1,//opaque fill: ' #FFFF99 ',//Table Fill Color stroke: ' #FF3300 ',//form line Color ' stroke- Width ': 0.5//table line width},//Even line even: {opacity:0,//transparent stroke: ' #6600CC ',//Table line Color ' stroke-width ': 0.5//table line width}, majorticksteps:20,//number of main intervals minorticksteps:3//pairs of intervals}, {type: "Category",/
                    /directory coordinates position: "Bottom", fields:[' name ', grid:true, Label: {rotate: { degrees:315//x axis Rotation coordinates font display: italic}}], series:[{//sequence Ty PE: ' line ', axis: ' LEFT ', Xfield: ' name ',//Horizontal Yfield: "Prestatics",//Field highlight: {size:7,
                Radius:7}, Style: {opacity:0.5}, Markerconfig: {
            Type: ' Circle ', Size:4, radius:4, ' Stroke-width ': 0},
                fill:true,//fills the area smooth:true, tips: {trackmouse:true, width:220, height:60, layout: ' Fit ', items:[{xtype: ' Container ', Items:[chartgrid]}, Renderer:function (Storeitem, item) {/ Storeitem the data item (x,y value) var storeitem = item.storeitem var gridstore = Chartgr
                   Id.store; var data = [{' Gridyear ': Storeitem.get (' name '), ' gridnum ': storeiteM.get (' Prestatics ')}] gridstore.loaddata (data)//
                This.settitle ("Year" +storeitem.get (' name ') + ' patent number ' +storeitem.get (' prestatics ')); }
            }
    	}]
    })