ExtJS 4 Chart Custom axis scale

Sencha's ExtJS is a very good front-end framework, especially for the landmark 4.0 release. 4.0 uses the MVC architecture and the new class system, and provides a very rich set of components. But although ExtJS is so powerful, there are still some unsatisfactory places. For example, the scale of the axes in the chart is usually evenly distributed, and the implementation of the ExtJS is also a uniform calculation scale with the maximum and minimum values of the axes and other parameters. However, when you are working with a custom scale, as shown in

The scale of the horizontal axis is a non-uniform value such as 5,10,20, but ExtJS does not support such a function (at least I did not find the document). The first thought was to hide the unwanted label, which could be written like this:

1 {2Type: ' Numeric ',3Position: ' Bottom ',4Fields: [' x '],5 Title:xaxistitle,6 Minimum:xRange.xMinimum,7 Maximum:xRange.xMaximum,8     Majorticksteps:5,9     Minorticksteps:10,Ten Label: { OneRendererfunction(val) { A             //lables: [5, ten,] -             if(Labels.indexof (val) < 0) { -                 return‘‘; the             } -             returnVal; -         } -     }, +Gridtrue -}

However, there are two problems with this writing, one is that the label value that needs to be displayed does not necessarily appear in renderer, and even if the label is not displayed, the vertical grid line (which adjusts the grid density by the properties of the red part in the configuration code) still appears, which may not be what we want. Through the lookup source discovery, in the internal axis implementation, is calculated by the axis range and the number of ticks, and the grid line is consistent with the coordinate scale. In the source file Ext\src\chart\axis\axis.js 480 lines:

 1  //  Build the array of steps out of the Fixed-value ' step '.  2  steps =  Array;  3  for  (val = +me.from; va L < +me.to; Val += step "{ 4   Steps.push (val);  5  }  6  Steps.push (+me.to); 

Both the label and grid lines are then used to steps this array. So, you can do something about this place, force the steps variable into the array we need, and let ExtJS do as we want. Obviously, can not directly modify the Ext source file. Here are two ways to rewrite the Ext.chart.axis.Axis Drawaxis method with the Ext.override method, and the other is to provide a custom implementation of the method in axis configuration parameters. The former affects all subsequent chart uses of the axis, which only affects the current chart. The code changes are as follows:

1Ext.syncrequire (' Ext.chart.axis.Axis ');2 Ext.override (Ext.chart.axis.Axis, {3     /**4 * Renders the axis into the screens and updates its position.5      */6Drawaxis:function(init) {7         varme = This,8 I,9x =me.x,Teny =Me.y, OneDashsize =Me.dashsize, ALength =Me.length, -Position =Me.position, -Verticalaxis = (Position = = "Left" | | position = = ' right '), theinflections = [], -Calclabels =(Me.isnumericaxis), -Stepcalcs =me.applydata (), -Step =Stepcalcs.step, +Steps =Stepcalcs.steps, -Stepsarray =Ext.isarray (steps), +from =Stepcalcs.from, Ato =stepcalcs.to, at             //If We have a single item, To-from would be 0. -Axisrange = (To-from) | | 1, - Truelength, - CurrentX, - CurrentY, - Path, inSubdashesx = Me.minorticksteps | | 0, -Subdashesy = Me.minorticksteps | | 0, toDashesx = Math.max (subdashesx + 1, 0), +Dashesy = Math.max (subdashesy + 1, 0), -Dashdirection = (Position = = ' Left ' | | position = = ' top '? -1:1), theDashlength = Dashsize *Dashdirection, *Series =Me.chart.series.items, $Firstseries = Series[0],Panax NotoginsengGutters = firstseries?FirstSeries.nullGutters:me.nullGutters, - padding, the Subdashes, + Subdashvalue, ADelta = 0, theStepcount = 0, + tick, axes, LN, Val, begin, end; -  $Me.from =from ; $Me.to =to ; -  -         //If There is nothing to show, then leave. the         if(Me.hidden | | (From >to )) { -             return;Wuyi         } the  -         //If no steps is specified (for instance If the store is empty) and then leave. Wu         if(Stepsarray && (steps.length = = 0)) | | (!stepsarray &&IsNaN (step))) { -             return; About         } $  -         if(Stepsarray) { -             //Clean the array of steps: -             //First remove the steps that is out of bounds. ASteps = Ext.Array.filter (steps,function(Elem, index, array) { +                 return(+elem > +me.from && +elem < +me.to); the}, This); -  $             //Then add bounds on each side. theSteps =Ext.Array.union ([Me.from], steps, [me.to]); the}Else { the             //Build the array of steps out of the fixed-value ' step '. theSteps =NewArray; -            if (me.fixedsteps) {steps = me.fixedsteps;72} else {for(val = +me.from ; Val < +me.to; Val + = Step) {Steps.push (val);}76 Steps.push (+me.to);                  + +} +  -         } the...//other original code omitted hereBayi     } the});

In the code, the red part of the IF statement block is where the rescue is. When used, the Fixedsteps attribute is added to the axis configuration code.

1 {2Type: ' Numeric ',3Position: ' Bottom ',4Fields: [' x '],5 Title:xaxistitle,6 Minimum:xRange.xMinimum,7 Maximum:xRange.xMaximum,8     fixedsteps: [5, 10,20],9GridtrueTen}

At this point, tricks is accomplished. Welcome to shoot Bricks.