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

xianbin

喜欢用jqplot的朋友一定碰到图形下标文字很长，会出现相互之间重叠的情况，如下图所示：


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

下面给出扩展的源码：
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.length <= tickMaxLength ? userTicks: userTicks.substring(0, (tickMaxLength - 1)) + '...';t.label = userTick;} else {t.label = userTicks;}                                // 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;                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;                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 = ' ';                }                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}...}});

效果如下图所示：