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字符串中，然後返回字符串。