我正在寻找相同的问题,但很遗憾目前还没有答案。我找到的丑陋解决方案是修改jqplot.highlighter.js以获得我想要的效果。下面是我是如何实现的:
声明xAxisFormatString和yAxisFormatString属性。
this.xAxisFormatString = '';
this.yAxisFormatString = '';
然后,在showtooltip方法中,使用这个而不是轴格式字符串。
var xfstr = series._xaxis._ticks[0].formatString;
if('' != hl.xAxisFormatString) {
xfstr = hl.xAxisFormatString;
}
var yfstr = series._yaxis._ticks[0].formatString;
if('' != hl.yAxisFormatString) {
yfstr = hl.yAxisFormatString;
}
调用图表时,
highlighter: {
show: true,
useAxesFormatters: true,
xAxisFormatString: '%m-%Y',
formatString: 'hi - %s',
sizeAdjust: 7.5
},
我将useAxesFormatters设置为true,因为我不想去修改tooltipformatstring。虽然我可以使用相同的格式化程序,但我希望覆盖formatstring,这样就能实现我的需求。
以下是完整的jqplot.highlighter.js代码:
(function($) {
$.jqplot.eventListenerHooks.push(['jqplotMouseMove', handleMove]);
$.jqplot.Highlighter = function(options) {
this.show = $.jqplot.config.enablePlugins;
this.markerRenderer = new $.jqplot.MarkerRenderer({shadow:false});
this.showMarker = true;
this.lineWidthAdjust = 2.5;
this.sizeAdjust = 5;
this.showTooltip = true;
this.tooltipLocation = 'nw';
this.fadeTooltip = true;
this.tooltipFadeSpeed = "fast";
this.tooltipOffset = 2;
this.tooltipAxes = 'both';
this.tooltipSeparator = ', ';
this.tooltipContentEditor = null;
this.useAxesFormatters = true;
this.xAxisFormatString = '';
this.yAxisFormatString = '';
this.tooltipFormatString = '%.5P';
this.formatString = null;
this.yvalues = 1;
this.bringSeriesToFront = false;
this._tooltipElem;
this.isHighlighting = false;
$.extend(true, this, options);
};
var locations = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
var locationIndicies = {'nw':0, 'n':1, 'ne':2, 'e':3, 'se':4, 's':5, 'sw':6, 'w':7};
var oppositeLocations = ['se', 's', 'sw', 'w', 'nw', 'n', 'ne', 'e'];
$.jqplot.Highlighter.init = function (target, data, opts){
var options = opts || {};
this.plugins.highlighter = new $.jqplot.Highlighter(options.highlighter);
};
$.jqplot.Highlighter.parseOptions = function (defaults, options) {
this.showHighlight = true;
};
$.jqplot.Highlighter.postPlotDraw = function() {
if (this.plugins.highlighter && this.plugins.highlighter.highlightCanvas) {
this.plugins.highlighter.highlightCanvas.resetCanvas();
this.plugins.highlighter.highlightCanvas = null;
}
if (this.plugins.highlighter && this.plugins.highlighter._tooltipElem) {
this.plugins.highlighter._tooltipElem.emptyForce();
this.plugins.highlighter._tooltipElem = null;
}
this.plugins.highlighter.highlightCanvas = new $.jqplot.GenericCanvas();
this.eventCanvas._elem.before(this.plugins.highlighter.highlightCanvas.createElement(this._gridPadding, 'jqplot-highlight-canvas', this._plotDimensions, this));
this.plugins.highlighter.highlightCanvas.setContext();
var elem = document.createElement('div');
this.plugins.highlighter._tooltipElem = $(elem);
elem = null;
this.plugins.highlighter._tooltipElem.addClass('jqplot-highlighter-tooltip');
this.plugins.highlighter._tooltipElem.css({position:'absolute', display:'none'});
this.eventCanvas._elem.before(this.plugins.highlighter._tooltipElem);
};
$.jqplot.preInitHooks.push($.jqplot.Highlighter.init);
$.jqplot.preParseSeriesOptionsHooks.push($.jqplot.Highlighter.parseOptions);
$.jqplot.postDrawHooks.push($.jqplot.Highlighter.postPlotDraw);
function draw(plot, neighbor) {
var hl = plot.plugins.highlighter;
var s = plot.series[neighbor.seriesIndex];
var smr = s.markerRenderer;
var mr = hl.markerRenderer;
mr.style = smr.style;
mr.lineWidth = smr.lineWidth + hl.lineWidthAdjust;
mr.size = smr.size + hl.sizeAdjust;
var rgba = $.jqplot.getColorComponents(smr.color);
var newrgb = [rgba[0], rgba[1], rgba[2]];
var alpha = (rgba[3] >= 0.6) ? rgba[3]*0.6 : rgba[3]*(2-rgba[3]);
mr.color = 'rgba('+newrgb[0]+','+newrgb[1]+','+newrgb[2]+','+alpha+')';
mr.init();
mr.draw(s.gridData[neighbor.pointIndex][0], s.gridData[neighbor.pointIndex][1], hl.highlightCanvas._ctx);
}
function showTooltip(plot, series, neighbor) {
var hl = plot.plugins.highlighter;
var elem = hl._tooltipElem;
if (hl.useAxesFormatters) {
var xf = series._xaxis._ticks[0].formatter;
var yf = series._yaxis._ticks[0].formatter;
var xfstr = series._xaxis._ticks[0].formatString;
if('' != hl.xAxisFormatString)
xfstr = hl.xAxisFormatString;
var yfstr = series._yaxis._ticks[0].formatString;
if('' != hl.yAxisFormatString)
yfstr = hl.yAxisFormatString;
var str;
var xstr = xf(xfstr, neighbor.data[0]);
var ystrs = [];
for (var i=1; i<hl.yvalues+1; i++) {
ystrs.push(yf(yfstr, neighbor.data[i]));
}
if (hl.formatString) {
switch (hl.tooltipAxes) {
case 'both':
case 'xy':
ystrs.unshift(xstr);
ystrs.unshift(hl.formatString);
str = $.jqplot.sprintf.apply($.jqplot.sprintf, ystrs);
break;
case 'yx':
ystrs.push(xstr);
ystrs.unshift(hl.formatString);
str = $.jqplot.sprintf.apply($.jqplot.sprintf, ystrs);
break;
case 'x':
str = $.jqplot.sprintf.apply($.jqplot.sprintf, [hl.formatString, xstr]);
break;
case 'y':
ystrs.unshift(hl.formatString);
str = $.jqplot.sprintf.apply($.jqplot.sprintf, ystrs);
break;
default:
ystrs.unshift(xstr);
ystrs.unshift(hl.formatString);
str = $.jqplot.sprintf.apply($.jqplot.sprintf, ystrs);
break;
}
}
else {
switch (hl.tooltipAxes) {
case 'both':
case 'xy':
str = xstr;
for (var i=0; i<ystrs.length; i++) {
str += hl.tooltipSeparator + ystrs[i];
}
break;
case 'yx':
str = '';
for (var i=0; i<ystrs.length; i++) {
str += ystrs[i] + hl.tooltipSeparator;
}
str += xstr;
break;
case 'x':
str = xstr;
break;
case 'y':
str = ystrs.join(hl.tooltipSeparator);
break;
default:
str = xstr;
for (var i=0; i<ystrs.length; i++) {
str += hl.tooltipSeparator + ystrs[i];
}
break;
}
}
}
else {
var str;
if (hl.tooltipAxes == 'both' || hl.tooltipAxes == 'xy') {
str = $.jqplot.sprintf(hl.tooltipFormatString, neighbor.data[0]) + hl.tooltipSeparator + $.jqplot.sprintf(hl.tooltipFormatString, neighbor.data[1]);
}
else if (hl.tooltipAxes == 'yx') {
str = $.jqplot.sprintf(hl.tooltipFormatString, neighbor.data[1]) + hl.tooltipSeparator + $.jqplot.sprintf(hl.tooltipFormatString, neighbor.data[0]);
}
else if (hl.tooltipAxes == 'x') {
str = $.jqplot.sprintf(hl.tooltipFormatString, neighbor.data[0]);
}
else if (hl.tooltipAxes == 'y') {
str = $.jqplot.sprintf(hl.tooltipFormatString, neighbor.data[1]);
}
}
if ($.isFunction(hl.tooltipContentEditor)) {
str = hl.tooltipContentEditor(str, neighbor.seriesIndex, neighbor.pointIndex, plot);
}
elem.html(str);
var gridpos = {x:neighbor.gridData[0], y:neighbor.gridData[1]};
var ms = 0;
var fact = 0.707;
if (series.markerRenderer.show == true) {
ms = (series.markerRenderer.size + hl.sizeAdjust)/2;
}
var loc = locations;
if (series.fillToZero && series.fill && neighbor.data[1] < 0) {
loc = oppositeLocations;
}
switch (loc[locationIndicies[hl.tooltipLocation]]) {
case 'nw':
var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true) - hl.tooltipOffset - fact * ms;
var y = gridpos.y + plot._gridPadding.top - hl.tooltipOffset - elem.outerHeight(true) - fact * ms;
break;
case 'n':
var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true)/2;
var y = gridpos.y + plot._gridPadding.top - hl.tooltipOffset - elem.outerHeight(true) - ms;
break;
case 'ne':
var x = gridpos.x + plot._gridPadding.left + hl.tooltipOffset + fact * ms;
var y = gridpos.y + plot._gridPadding.top - hl.tooltipOffset - elem.outerHeight(true) - fact * ms;
break;
case 'e':
var x = gridpos.x + plot._gridPadding.left + hl.tooltipOffset + ms;
var y = gridpos.y + plot._gridPadding.top - elem.outerHeight(true)/2;
break;
case 'se':
var x = gridpos.x + plot._gridPadding.left + hl.tooltipOffset + fact * ms;
var y = gridpos.y + plot._gridPadding.top + hl.tooltipOffset + fact * ms;
break;
case 's':
var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true)/2;
var y = gridpos.y + plot._gridPadding.top + hl.tooltipOffset + ms;
break;
case 'sw':
var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true) - hl.tooltipOffset - fact * ms;
var y = gridpos.y + plot._gridPadding.top + hl.tooltipOffset + fact * ms;
break;
case 'w':
var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true) - hl.tooltipOffset - ms;
var y = gridpos.y + plot._gridPadding.top - elem.outerHeight(true)/2;
break;
default:
var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true) - hl.tooltipOffset - fact * ms;
var y = gridpos.y + plot._gridPadding.top - hl.tooltipOffset - elem.outerHeight(true) - fact * ms;
break;
}
elem.css('left', x);
elem.css('top', y);
if (hl.fadeTooltip) {
elem.stop(true,true).fadeIn(hl.tooltipFadeSpeed);
}
else {
elem.show();
}
elem = null;
}
function handleMove(ev, gridpos, datapos, neighbor, plot) {
var hl = plot.plugins.highlighter;
var c = plot.plugins.cursor;
if (hl.show) {
if (neighbor == null && hl.isHighlighting) {
var ctx = hl.highlightCanvas._ctx;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
if (hl.fadeTooltip) {
hl._tooltipElem.fadeOut(hl.tooltipFadeSpeed);
}
else {
hl._tooltipElem.hide();
}
if (hl.bringSeriesToFront) {
plot.restorePreviousSeriesOrder();
}
hl.isHighlighting = false;
ctx = null;
}
else if (neighbor != null && plot.series[neighbor.seriesIndex].showHighlight && !hl.isHighlighting) {
hl.isHighlighting = true;
if (hl.showMarker) {
draw(plot, neighbor);
}
if (hl.showTooltip && (!c || !c._zoom.started)) {
showTooltip(plot, plot.series[neighbor.seriesIndex], neighbor);
}
if (hl.bringSeriesToFront) {
plot.moveSeriesToFront(neighbor.seriesIndex);
}
}
}
}
})(jQuery);