jqPlot使用光标显示自定义工具提示

Question

我使用Cursor插件在jqplot图表上显示垂直线。 Cursor插件的工具提示显示X和Y值。

我想添加一段元数据到绘图点。

[x，y，1337]其中1337是meta deta。

我想修改光标插件工具提示来显示这个metadeta以及它已经显示的数据。

使用案例：我有多个系列已经在所有系列的趋势图中扩展为0-100。我需要显示未缩放的值。

更新：

我知道了由黑客起来jqplot.cursor.js工作，有没有更好的办法？

Line 468: function updateToolTip(gridpos, datapos, plot){ 
       // ... 
       s += $.jqplot.sprintf(c.tooltipFormatString, label, sx, sy, data[2]); 

Answer 1

这是我如何重写tooltipContentEditor jqplot功能，它的伟大工程。

highlighter: { 
        show: true, 
        showMarker:true, 
        showTooltip:true, 
        sizeAdjust: 10, 
        tooltipLocation: 'se', 
        tooltipAxes: 'xy', 
        yvalues: 1, 
        formatString:'<table class="jqplot-highlighter"><tr><td>date:</td><td>%s</td></tr><tr><td>PiecesPerHour:</td><td align="right">%s</td></tr></table>', 
        useAxesFormatters: true, 
        tooltipContentEditor: function(str, seriesIndex, pointIndex, plot){ 
         var data = plot.series[seriesIndex].data[pointIndex]; 
         var label = plot.legend.labels[seriesIndex].indexOf('Target') 
         var format = []; 
         //A little formatting to the data before I join it to the Html string 
         if (that.model.get('groupBy')==='month') 
          format[0] = new Date(data[0] + 1000*60*60*24).format('mmmm yyyy'); 
         else 
          format[0] = new Date(data[0]).format('mmmm dd, yyyy'); 
         format[1] = new Number(data[1]).toFixed(1) 

         //join the data to the Html string: 
         str = $.jqplot.sprintf.apply($.jqplot.sprintf, [str].concat(format)); 
         return str; 
        } 
       } 

基本上你会得到Series和Point数据，并用sprintf将它加入到一个Html字符串中，然后返回字符串。