jquery jqplot jqplot.highlighter在multy系列圖表中顯示系列名稱

Question

我有一個多系列圖表，並且想要突出顯示不僅x和y座標的點，而且series名稱。

可能嗎？

Answer 1

我需要相同的功能。我發現這個職位

http://groups.google.com/group/jqplot-users/browse_thread/thread/edcbe2a30ef5052b/622626628106cdc6?lnk=gst&q=series+name+in+highlighter#622626628106cdc6

讀這篇文章，檢查代碼後，我更改了插件/ jqplot.highlighter.js，線路292（v1.0.0b2_r947）這是「案件‘XY’」從開關塊（opts.tooltipAxes）。

出來：

str = xstr; 

在：

str = series.label + ": "; 
str += xstr; 

現在我的系列名稱在數據點的工具提示:)你也許可以通過添加新的交換機系列選件擴展此所示，但我希望它一直都在。

Answer 2

我需要相同的功能。但我預先不要自己更改jqplot腳本，我使用的解決方案是here。

這是相當直接的。此解決方案的好處是，您可以在不修改jqplot腳本的情況下修改工具提示的內容。這樣你的代碼就可以獨立於未來的更新。

例如，見下面我的解決方案，內置擴展the aforementioned example：

$.jqplot('chart-id', values, { 
    series: [ 
       { 
        highlighter: { formatString: 'serie1: %s, %s'} 
       }, 
       ... 
      ] 
    axes : { 
     xaxis:{ 
      renderer:$.jqplot.DateAxisRenderer, 
      tickOptions:{ 
       formatString:'%b %#d' 
      } 
     }, 
     yaxis:{ 
       tickOptions:{ 
        formatString:'%.2f' 
       } 
     } 
    }, 
    highlighter: { 
     show: true 
    } 
    }); 

Answer 3

我發現這樣做是這樣的最簡單方法當你不知道你的系列的名字時很頭疼。例如自動從DB綁定。 沒有必要更改jqplot.highlighter.js。它沒有記錄，但你必須tooltipContentEditor

highlighter: { 
       // you can have anything here 
       tooltipFormatString: '<b><i><span style="color:red;">%.2f</span></i></b>', 
       tooltipContentEditor: function (str, seriesIndex, pointIndex, plot) { 
       //the str is the ready string from tooltipFormatString 
       //depending on how do you give the series to the chart you can use plot.legend.labels[seriesIndex] or plot.series[seriesIndex].label 
        return '<b><span style="color:blue;">' + plot.legend.labels[seriesIndex] + ': </span></b>' + str; 
       } 
      }, 

Answer 4

朱利安·格雷尼爾的解決方案是好的，但：

function myMove (ev, gridpos, datapos, neighbor, plot) { 
    if (neighbor == null) { 
     $('#myToolTip').fadeOut(); 
    } 
    if (neighbor != null) {  
     var seriesName = plot.series[neighbor.seriesIndex].label; 
     var x = neighbor.data[0]; 
     var y = neighbor.data[1]; 
     if(!lastNeighbor || (lastNeighbor.seriesIndex !== neighbor.seriesIndex || lastNeighbor.pointIndex !== neighbor.pointIndex)){ 
      var myText = "Series name="+seriesName+"<br/>Value="+y; 
      $('#myToolTip').html(myText).css({left:gridpos.x, top:gridpos.y}).fadeIn(); 
     } 
    } 
    lastNeighbor = neighbor; 
} 
var lastNeighbor = null;