对jqplot的CategoryAxisRenderer插件进行扩展，让文字出现省略号
喜欢用jqplot的朋友一定碰到图形下标文字很长，会出现相互之间重叠的情况，如下图所示：http://dl.iteye.com/upload/attachment/0075/3574/33f7b5fe-e325-3c5a-8cec-87e004e5c507.jpg
这是时候，我们就必须在显示底部文字的时候进行处理，比如限定文字的长度等，如：今年收入增...
下面给出扩展的源码：
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; } else { val = s.data; } 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; } else { val = s.data; } // 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 = idx; } else { s.data = 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的插件：
<scripttype="text/javascript" src="../jqplot/jqplot.categoryAxisRenderer.min.js'}"></script>
然后在其后面引入扩展插件：
<scripttype="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}...}});
效果如下图所示：
http://dl.iteye.com/upload/attachment/0075/3583/696f2571-61ee-3cc9-8f98-b9c6c39b20d6.jpg
页:
[1]