Question

我有一个多系列图表，并且不仅要突出显示该点的x和y坐标，还要突出显示series名称。

有可能吗？

Answer 1

我发现这样做的最简单方法是：

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

Answer 2

我需要相同的功能。我找到了这篇文章

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

在阅读完并检查代码后，我对plugins / jqplot.highlighter.js进行了更改，第292行（v1.0.0b2_r947）这是来自switch的“case”xy'“块（opts.tooltipAxes）。< / p>

出：

str = xstr;

在：

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

现在我的系列名称显示在数据点工具提示:)你可以通过在系列选项中添加一个新的开关来扩展它，但我希望它一直在上。

Answer 3

我需要相同的功能。但我不喜欢自己更改jqplot脚本，而是使用了here提供的解决方案。

这是相当直接的。此解决方案的好处是您可以在不修改jqplot脚本的情况下修改工具提示的内容。这样，您的代码将独立于未来的更新。

例如，请参阅下面的解决方案，内置the aforementioned example：

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;

Answer 4

Julien Grenier的解决方案很好但是当你不知道系列的名字时会很头疼。例如，自动从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;
                 }
             },

jquery jqplot jqplot.highlighter在多系列图表中显示系列名称

4 个答案: