Extjs 4 chart自定义坐标轴刻度

Sencha出品的ExtJs是一个非常优秀的前端框架，尤其是具有里程碑意义的4.0的发布。4.0采用MVC架构和全新的class系统，并且提供了非常丰富的组件。但是，尽管ExtJS如此强大，仍有不尽人意的地方。比如，chart里坐标轴的刻度通常是均匀分布的，ExtJS的实现也是通过坐标轴的最大值和最小值以及其他参数配置均匀的计算刻度。但是，在工作过程中碰到需要自定义刻度的情况，如下图所示

水平轴的刻度是5,10,20这样的不均匀值，但是ExtJS不支持这样的功能（至少我翻遍了文档也没找到）。最初想到的办法是隐藏不需要的label，可这样写：

{
    type: 'Numeric',
    position: 'bottom',
    fields: ['x'],
    title: xAxisTitle,
    minimum: xRange.xMinimum,
    maximum: xRange.xMaximum,
    majorTickSteps: 5,
    minorTickSteps: 10,
    label: {
        renderer: function(val) {
            //lables: [5, 10, 20]
            if (labels.indexOf(val) < 0) {
                return '';
            }
            return val;
        }
    },
    grid: true
}

但是这样写有两个问题，一是需要显示的label值不一定会出现在renderer中，二是即便label没显示，垂直的网格线（通过配置代码中红色部分的属性可以调节网格线密度）还是会出现，这可能并不是我们想要的。通过查阅源码发现，在坐标轴内部实现中，是通过坐标轴范围和刻度个数来计算的，并且网格线跟坐标刻度是一致的。在源码文件ext\src\chart\axis\Axis.js 480行：

// Build the array of steps out of the fixed-value 'step'.
       steps = new Array;
       for (val = +me.from; val < +me.to; val += step) {
            steps.push(val);
       }
       steps.push(+me.to);

之后渲染label和网格线都用到steps这个数组。所以，可以在这个地方做点手脚，把steps变量强行改成我们需要的数组，让ExtJS按照我们的意图去做。显然，不能直接去修改Ext的源码文件。这里有两种办法，一是用Ext.override方法去重写Ext.chart.axis.Axis的drawAxis方法，二是在Axis的配置参数里提供该方法的自定义实现。前者会影响到之后的所有用到坐标轴的chart，后者只会影响当前的chart. 代码改动如下：

Ext.syncRequire('Ext.chart.axis.Axis');
Ext.override(Ext.chart.axis.Axis, {
    /**
     * Renders the axis into the screen and updates its position.
     */
    drawAxis: function(init) {
        var me = this,
            i,
            x = me.x,
            y = me.y,
            dashSize = me.dashSize,
            length = me.length,
            position = me.position,
            verticalAxis = (position == 'left' || position == 'right'),
            inflections = [],
            calcLabels = (me.isNumericAxis),
            stepCalcs = me.applyData(),
            step = stepCalcs.step,
            steps = stepCalcs.steps,
            stepsArray = Ext.isArray(steps),
            from = stepCalcs.from,
            to = stepCalcs.to,
            // If we have a single item, to - from will be 0.
            axisRange = (to - from) || 1,
            trueLength,
            currentX,
            currentY,
            path,
            subDashesX = me.minorTickSteps || 0,
            subDashesY = me.minorTickSteps || 0,
            dashesX = Math.max(subDashesX + 1, 0),
            dashesY = Math.max(subDashesY + 1, 0),
            dashDirection = (position == 'left' || position == 'top' ? -1 : 1),
            dashLength = dashSize * dashDirection,
            series = me.chart.series.items,
            firstSeries = series[0],
            gutters = firstSeries ? firstSeries.nullGutters : me.nullGutters,
            padding,
            subDashes,
            subDashValue,
            delta = 0,
            stepCount = 0,
            tick, axes, ln, val, begin, end;

        me.from = from;
        me.to = to;

        // If there is nothing to show, then leave. 
        if (me.hidden || (from > to)) {
            return;
        }

        // If no steps are specified (for instance if the store is empty), then leave.
        if ((stepsArray && (steps.length == 0)) || (!stepsArray && isNaN(step))) {
            return;
        }

        if (stepsArray) {
            // Clean the array of steps:
            // First remove the steps that are out of bounds.
            steps = Ext.Array.filter(steps, function(elem, index, array) {
                return (+elem > +me.from && +elem < +me.to);
            }, this);

            // Then add bounds on each side.
            steps = Ext.Array.union([me.from], steps, [me.to]);
        } else {
            // Build the array of steps out of the fixed-value 'step'.
            steps = new Array;
70             if (me.fixedSteps) {
71                 steps = me.fixedSteps;
72             } else {
73                 for (val = +me.from; val < +me.to; val += step) {
74                     steps.push(val);
75                 }
76                 steps.push(+me.to);
77             }

        }
        ...//此处省略其他原有代码
    }
});

代码中红色部分if语句块里就是偷梁换柱的地方。使用的时候，在axis的配置代码里加上fixedSteps属性就行了。

{
    type: 'Numeric',
    position: 'bottom',
    fields: ['x'],
    title: xAxisTitle,
    minimum: xRange.xMinimum,
    maximum: xRange.xMaximum,
    fixedSteps: [5, 10,20],
    grid: true
}

至此，雕虫小技大功告成。欢迎拍砖。