对jqplot的CategoryAxisRenderer插件进行扩展，让文字出现省略号

喜欢用jqplot的朋友一定碰到图形下标文字很长，会出现相互之间重叠的情况，如下图所示：
[img]http://dl.iteye.com/upload/attachment/0075/3574/33f7b5fe-e325-3c5a-8cec-87e004e5c507.jpg[/img]

这是时候，我们就必须在显示底部文字的时候进行处理，比如限定文字的长度等，如：今年收入增...

下面给出扩展的源码：
jqplot.categoryAxisRenderer.extend.js

/**
 * 本扩展插件是对jqplot插件jqplot.categoryAxisRenderer的扩展，主要修改了显示图形下标Tick的处理，
 * 在显示Tick之前，判断Tick标签的长度，当标题长度超过tickMaxLength定义的长度时，截获前
 * tickMaxLength - 1个字符，然后加上省略号。
 * 
 * 作者：苏显斌
 */
(function($) {
    $.jqplot.CategoryAxisRenderer.prototype.createTicks = function() {
        // we're are operating on an axis here
        var ticks = this._ticks;
        var userTicks = this.ticks;
        var name = this.name;
        // databounds were set on axis initialization.
        var db = this._dataBounds;
        var dim, interval;
        var min, max;
        var pos1, pos2;
        var tt, i;

        // X轴的标题文字最大长度
        var tickMaxLength = this.tickMaxLength;

        // if we already have ticks, use them.
        if (userTicks.length) {
            // adjust with blanks if we have groups
            if (this.groups > 1 && !this._grouped) {
                var l = userTicks.length;
                var skip = parseInt(l/this.groups, 10);
                var count = 0;
                for (var i=skip; i<l; i+=skip) {
                    userTicks.splice(i+count, 0, ' ');
                    count++;
                }
                this._grouped = true;
            }
            this.min = 0.5;
            this.max = userTicks.length + 0.5;
            var range = this.max - this.min;
            this.numberTicks = 2*userTicks.length + 1;
            for (i=0; i<userTicks.length; i++){
                tt = this.min + 2 * i * range / (this.numberTicks-1);
                // need a marker before and after the tick
                var t = new this.tickRenderer(this.tickOptions);
                t.showLabel = false;
                // t.showMark = true;
                t.setTick(tt, this.name);
                this._ticks.push(t);
                var t = new this.tickRenderer(this.tickOptions);

                // 当标题长度超过tickMaxLength定义的长度时，截获前tickMaxLength - 1个字符，
                // 然后加上省略号。
				if (tickMaxLength) {
					var userTick = userTicks[i].length <= tickMaxLength ? userTicks[i]
							: userTicks[i].substring(0, (tickMaxLength - 1)) + '...';
					t.label = userTick;
				} else {
					t.label = userTicks[i];
				}

                // t.showLabel = true;
                t.showMark = false;
                t.showGridline = false;
                t.setTick(tt+0.5, this.name);
                this._ticks.push(t);
            }
            // now add the last tick at the end
            var t = new this.tickRenderer(this.tickOptions);
            t.showLabel = false;
            // t.showMark = true;
            t.setTick(tt+1, this.name);
            this._ticks.push(t);
        }

        // we don't have any ticks yet, let's make some!
        else {
            if (name == 'xaxis' || name == 'x2axis') {
                dim = this._plotDimensions.width;
            }
            else {
                dim = this._plotDimensions.height;
            }

            // if min, max and number of ticks specified, user can't specify interval.
            if (this.min != null && this.max != null && this.numberTicks != null) {
                this.tickInterval = null;
            }

            // if max, min, and interval specified and interval won't fit, ignore interval.
            if (this.min != null && this.max != null && this.tickInterval != null) {
                if (parseInt((this.max-this.min)/this.tickInterval, 10) != (this.max-this.min)/this.tickInterval) {
                    this.tickInterval = null;
                }
            }

            // find out how many categories are in the lines and collect labels
            var labels = [];
            var numcats = 0;
            var min = 0.5;
            var max, val;
            var isMerged = false;
            for (var i=0; i<this._series.length; i++) {
                var s = this._series[i];
                for (var j=0; j<s.data.length; j++) {
                    if (this.name == 'xaxis' || this.name == 'x2axis') {
                        val = s.data[j][0];
                    }
                    else {
                        val = s.data[j][1];
                    }
                    if ($.inArray(val, labels) == -1) {
                        isMerged = true;
                        numcats += 1;      
                        labels.push(val);
                    }
                }
            }

            if (isMerged && this.sortMergedLabels) {
                labels.sort(function(a,b) { return a - b; });
            }

            // keep a reference to these tick labels to use for redrawing plot (see bug #57)
            this.ticks = labels;

            // now bin the data values to the right lables.
            for (var i=0; i<this._series.length; i++) {
                var s = this._series[i];
                for (var j=0; j<s.data.length; j++) {
                    if (this.name == 'xaxis' || this.name == 'x2axis') {
                        val = s.data[j][0];
                    }
                    else {
                        val = s.data[j][1];
                    }
                    // for category axis, force the values into category bins.
                    // we should have the value in the label array now.
                    var idx = $.inArray(val, labels)+1;
                    if (this.name == 'xaxis' || this.name == 'x2axis') {
                        s.data[j][0] = idx;
                    }
                    else {
                        s.data[j][1] = idx;
                    }
                }
            }

            // adjust with blanks if we have groups
            if (this.groups > 1 && !this._grouped) {
                var l = labels.length;
                var skip = parseInt(l/this.groups, 10);
                var count = 0;
                for (var i=skip; i<l; i+=skip+1) {
                    labels[i] = ' ';
                }
                this._grouped = true;
            }

            max = numcats + 0.5;
            if (this.numberTicks == null) {
                this.numberTicks = 2*numcats + 1;
            }

            var range = max - min;
            this.min = min;
            this.max = max;
            var track = 0;

            // todo: adjust this so more ticks displayed.
            var maxVisibleTicks = parseInt(3+dim/10, 10);
            var skip = parseInt(numcats/maxVisibleTicks, 10);

            if (this.tickInterval == null) {

                this.tickInterval = range / (this.numberTicks-1);

            }
            // if tickInterval is specified, we will ignore any computed maximum.
            for (var i=0; i<this.numberTicks; i++){
                tt = this.min + i * this.tickInterval;
                var t = new this.tickRenderer(this.tickOptions);
                // if even tick, it isn't a category, it's a divider
                if (i/2 == parseInt(i/2, 10)) {
                    t.showLabel = false;
                    t.showMark = true;
                }
                else {
                    if (skip>0 && track<skip) {
                        t.showLabel = false;
                        track += 1;
                    }
                    else {
                        t.showLabel = true;
                        track = 0;
                    } 
                    t.label = t.formatter(t.formatString, labels[(i-1)/2]);
                    t.showMark = false;
                    t.showGridline = false;
                }
                t.setTick(tt, this.name);
                this._ticks.push(t);
            }
        }
    };
})(jQuery);

大家注意红色字体的代码，这是对原有的源码做了一些修改，增加了设置Tick最大长度的属性字段以及对Tick超过长度时候的控制。

使用方法：
在HTML或JSP中引入jqplot的插件：
<script type="text/javascript" src="../jqplot/jqplot.categoryAxisRenderer.min.js'}"></script>
然后在其后面引入扩展插件：
<script type="text/javascript" src="../jqplot/jqplot.categoryAxisRenderer.extend.js'}"></script>

并在创建jqplot的时候设置属性：

$.jqplot(chartContainerId, chartData, {
	...
	axes : {
		xaxis : {
			renderer : $.jqplot.CategoryAxisRenderer,
			rendererOptions : {
				fillToZero : true,
				tickMaxLength : 6  // 设置该属性后，将自动限制标题长度
			},
			ticks : ticks
		}

		...
	}
});

效果如下图所示：
[img]http://dl.iteye.com/upload/attachment/0075/3583/696f2571-61ee-3cc9-8f98-b9c6c39b20d6.jpg[/img]