jqplot formato de información sobre herramientas valores

Question

Quiero tener una información sobre herramientas al pasar el cursor resaltar cosita en jqplot. El problema es que quiero que proporcione más detalles que en los ejes. Entonces el formateador debería ser diferente. No puedo conseguir que muestre los segundos a:

¡Hay un fidle JS here!

Quiero que la marca de tiempo se muestre como horas: minutos: segundos, que sería formato de cadena '% H:% M:% S' o '% T' o '% X'. ¿Pero cómo hago eso?

highlighter: { 
     show: true, 
     sizeAdjust: 3, 
     //useAxesFormatters: false, 
     //tooltipFormatString: '%H:%M:%S', 
     formatString: '<table class="jqplot-highlighter"><tr><td>tijd:</td><td>%s</td></tr><tr><td>snelheid:</td><td>%s</td></tr></table>', 
    }, 

Answer 1

Esta pregunta se hace viejo, pero yo estaba buscando para el mismo y hay una opciones (incluso en la versión utilizada aquí) para hacerlo:

http://jsfiddle.net/coma/DWFTb/151/

highlighter: { 
    show: true, 
    sizeAdjust: 3, 
    tooltipContentEditor: function(str, seriesIndex, pointIndex, jqPlot) { 

     return series[seriesIndex][pointIndex][0]; 

    } 
}... 

espero que esto ayuda a otros.

Answer 2

Si desea utilizar rotulador se puede obtener rápidamente resultados buscados por el establecimiento de su formato en el tickOptions como el formato del rotulador utiliza se toma de las garrapatas.

lo contrario, debe servir a sí mismo la jqplotMouseMove caso as shown here.

Answer 3

que estaba buscando misma pregunta, por desgracia no hay respuesta todavía. La fea solución con la que vine es modificar el jqplot.highlighter.js para obtener lo que quería. Aquí es cómo, he logrado esto,

Declarar xAxisFormatString y yAxisFormatString propiedades

// prop: xAxisFormatString 
    // If this is provided then it will override the axesformatter format string 
    this.xAxisFormatString = ''; 
    // prop: xAxisFormatString 
    // If this is provided then it will override the axesformatter format string 
    this.yAxisFormatString = ''; 

A continuación, en el método showtooltip utilizaron en lugar de cadena de formato ejes

 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; 

Cuando se llama a la gráfica,

highlighter: { 
    show: true, 
useAxesFormatters: true, 
xAxisFormatString: '%m-%Y', 
formatString: 'hi - %s', 
    sizeAdjust: 7.5 
    }, 

Tengo el uso de AxesFormatters cierto porque no quiero meterse con tooltipformatstring. Estoy de acuerdo en usar el mismo formateador, pero me gustaría sobrescribir la cadena de formato. de esta manera lo tengo funcionando.

Aquí está el jqplot.highlighter.js completos

/** 
* jqPlot 
* Pure JavaScript plotting plugin using jQuery 
* 
* Version: 1.0.0b2_r792 
* 
* Copyright (c) 2009-2011 Chris Leonello 
* jqPlot is currently available for use in all personal or commercial projects 
* under both the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL 
* version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html) licenses. This means that you can 
* choose the license that best suits your project and use it accordingly. 
* 
* Although not required, the author would appreciate an email letting him 
* know of any substantial use of jqPlot. You can reach the author at: 
* chris at jqplot dot com or see http://www.jqplot.com/info.php . 
* 
* If you are feeling kind and generous, consider supporting the project by 
* making a donation at: http://www.jqplot.com/donate.php . 
* 
* sprintf functions contained in jqplot.sprintf.js by Ash Searle: 
* 
*  version 2007.04.27 
*  author Ash Searle 
*  http://hexmen.com/blog/2007/03/printf-sprintf/ 
*  http://hexmen.com/js/sprintf.js 
*  The author (Ash Searle) has placed this code in the public domain: 
*  "This code is unrestricted: you are free to use it however you like." 
* 
*/ 
(function($) { 
$.jqplot.eventListenerHooks.push(['jqplotMouseMove', handleMove]); 

/** 
* Class: $.jqplot.Highlighter 
* Plugin which will highlight data points when they are moused over. 
* 
* To use this plugin, include the js 
* file in your source: 
* 
* > <script type="text/javascript" src="plugins/jqplot.highlighter.js"></script> 
* 
* A tooltip providing information about the data point is enabled by default. 
* To disable the tooltip, set "showTooltip" to false. 
* 
* You can control what data is displayed in the tooltip with various 
* options. The "tooltipAxes" option controls wether the x, y or both 
* data values are displayed. 
* 
* Some chart types (e.g. hi-low-close) have more than one y value per 
* data point. To display the additional values in the tooltip, set the 
* "yvalues" option to the desired number of y values present (3 for a hlc chart). 
* 
* By default, data values will be formatted with the same formatting 
* specifiers as used to format the axis ticks. A custom format code 
* can be supplied with the tooltipFormatString option. This will apply 
* to all values in the tooltip. 
* 
* For more complete control, the "formatString" option can be set. This 
* Allows conplete control over tooltip formatting. Values are passed to 
* the format string in an order determined by the "tooltipAxes" and "yvalues" 
* options. So, if you have a hi-low-close chart and you just want to display 
* the hi-low-close values in the tooltip, you could set a formatString like: 
* 
* > highlighter: { 
* >  tooltipAxes: 'y', 
* >  yvalues: 3, 
* >  formatString:'<table class="jqplot-highlighter"> 
* >   <tr><td>hi:</td><td>%s</td></tr> 
* >   <tr><td>low:</td><td>%s</td></tr> 
* >   <tr><td>close:</td><td>%s</td></tr></table>' 
* > } 
* 
*/ 
$.jqplot.Highlighter = function(options) { 
    // Group: Properties 
    // 
    //prop: show 
    // true to show the highlight. 
    this.show = $.jqplot.config.enablePlugins; 
    // prop: markerRenderer 
    // Renderer used to draw the marker of the highlighted point. 
    // Renderer will assimilate attributes from the data point being highlighted, 
    // so no attributes need set on the renderer directly. 
    // Default is to turn off shadow drawing on the highlighted point. 
    this.markerRenderer = new $.jqplot.MarkerRenderer({shadow:false}); 
    // prop: showMarker 
    // true to show the marker 
    this.showMarker = true; 
    // prop: lineWidthAdjust 
    // Pixels to add to the lineWidth of the highlight. 
    this.lineWidthAdjust = 2.5; 
    // prop: sizeAdjust 
    // Pixels to add to the overall size of the highlight. 
    this.sizeAdjust = 5; 
    // prop: showTooltip 
    // Show a tooltip with data point values. 
    this.showTooltip = true; 
    // prop: tooltipLocation 
    // Where to position tooltip, 'n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw' 
    this.tooltipLocation = 'nw'; 
    // prop: fadeTooltip 
    // true = fade in/out tooltip, flase = show/hide tooltip 
    this.fadeTooltip = true; 
    // prop: tooltipFadeSpeed 
    // 'slow', 'def', 'fast', or number of milliseconds. 
    this.tooltipFadeSpeed = "fast"; 
    // prop: tooltipOffset 
    // Pixel offset of tooltip from the highlight. 
    this.tooltipOffset = 2; 
    // prop: tooltipAxes 
    // Which axes to display in tooltip, 'x', 'y' or 'both', 'xy' or 'yx' 
    // 'both' and 'xy' are equivalent, 'yx' reverses order of labels. 
    this.tooltipAxes = 'both'; 
    // prop; tooltipSeparator 
    // String to use to separate x and y axes in tooltip. 
    this.tooltipSeparator = ', '; 
    // prop; tooltipContentEditor 
    // Function used to edit/augment/replace the formatted tooltip contents. 
    // Called as str = tooltipContentEditor(str, seriesIndex, pointIndex) 
    // where str is the generated tooltip html and seriesIndex and pointIndex identify 
    // the data point being highlighted. Should return the html for the tooltip contents. 
    this.tooltipContentEditor = null; 
    // prop: useAxesFormatters 
    // Use the x and y axes formatters to format the text in the tooltip. 
    this.useAxesFormatters = true; 
// prop: xAxisFormatString 
// If this is provided then it will override the axesformatter format string 
this.xAxisFormatString = ''; 
// prop: xAxisFormatString 
// If this is provided then it will override the axesformatter format string 
this.yAxisFormatString = ''; 
    // prop: tooltipFormatString 
    // sprintf format string for the tooltip. 
    // Uses Ash Searle's javascript sprintf implementation 
    // found here: http://hexmen.com/blog/2007/03/printf-sprintf/ 
    // See http://perldoc.perl.org/functions/sprintf.html for reference. 
    // Additional "p" and "P" format specifiers added by Chris Leonello. 
    this.tooltipFormatString = '%.5P'; 
    // prop: formatString 
    // alternative to tooltipFormatString 
    // will format the whole tooltip text, populating with x, y values as 
    // indicated by tooltipAxes option. So, you could have a tooltip like: 
    // 'Date: %s, number of cats: %d' to format the whole tooltip at one go. 
    // If useAxesFormatters is true, values will be formatted according to 
    // Axes formatters and you can populate your tooltip string with 
    // %s placeholders. 
    this.formatString = null; 
    // prop: yvalues 
    // Number of y values to expect in the data point array. 
    // Typically this is 1. Certain plots, like OHLC, will 
    // have more y values in each data point array. 
    this.yvalues = 1; 
    // prop: bringSeriesToFront 
    // This option requires jQuery 1.4+ 
    // True to bring the series of the highlighted point to the front 
    // of other series. 
    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']; 

// axis.renderer.tickrenderer.formatter 

// called with scope of plot 
$.jqplot.Highlighter.init = function (target, data, opts){ 
    var options = opts || {}; 
    // add a highlighter attribute to the plot 
    this.plugins.highlighter = new $.jqplot.Highlighter(options.highlighter); 
}; 

// called within scope of series 
$.jqplot.Highlighter.parseOptions = function (defaults, options) { 
    // Add a showHighlight option to the series 
    // and set it to true by default. 
    this.showHighlight = true; 
}; 

// called within context of plot 
// create a canvas which we can draw on. 
// insert it before the eventCanvas, so eventCanvas will still capture events. 
$.jqplot.Highlighter.postPlotDraw = function() { 
    // Memory Leaks patch  
    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) { 
    // neighbor looks like: {seriesIndex: i, pointIndex:j, gridData:p, data:s.data[j]} 
    // gridData should be x,y pixel coords on the grid. 
    // add the plot._gridPadding to that to get x,y in the target. 
    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: // same as xy 
        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: // same as 'xy' 
        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)) { 
     // args str, seriesIndex, pointIndex are essential so the hook can look up 
     // extra data for the point. 
     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: // same as '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; 
    } 
    elem.css('left', x); 
    elem.css('top', y); 
    if (hl.fadeTooltip) { 
     // Fix for stacked up animations. Thnanks Trevor! 
     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); 

Answer 4

He intentado utilizar coma's answer pero primero lo modificó para:

return jqPlot.series[seriesIndex]._plotData[pointIndex][0]; 

que es un corte (ya que utiliza _plotData) y luego lo cambiaron a

return jqPlot.data[seriesIndex][pointIndex][0]; 

que debería estar bien.