jqPlot高亮器更改x值

Question

我有一个jqPlot折线图，我正在尝试弄清楚如何自定义X值的高亮文本。

所以，我有以下内容：

var line1=[100, 68, 63, 36, 28];
var line2=[100, 71, 68, 42, 32];
var line3=[100, 60, 45, 15, 5];
var line4=[100, 76, 58, 22, 8];
var plot3 = $.jqplot('chart3', [line1,line2,line3,line4], {
axes:{
      xaxis: {
               ticks: [  [1, 'group1'], 
                         [2, 'group2'], 
                         [3, 'group3'], 
                         [4, 'group4'], 
                         [5, 'group5']
                      ],
               tickOptions:{
                      showGridline: false,
               },
            },
      yaxis:{
             label:'Percentage',
             labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
             min : 0,
             max : 100,
             pad : 0,
             numberTicks : 11,
            }
    },

这段代码展示了一个图表，X轴显示的是group1、group2等等。然而，当我添加highlighter选项时，例如在line1的tick 2上悬停时，框中显示的是"2.0, 68"。我希望它显示的是"group2, 68"。

我尝试过修改formatString参数，但无法使其正常工作。请问有什么方法可以解决这个问题吗？

谢谢。

- Jake

Answer 1

我可以想出一个解决方案，也许不是最好的，但考虑到您提供的代码，这是我能快速思考出的最合适的方案。它涉及使用以下代码。基本上，在每次鼠标移动时，只要邻居不为null（这是显示高亮提示工具的条件），我就会更改我喜欢的提示工具。

$("#chart").bind('jqplotMouseMove', function(ev, gridpos, datapos, neighbor, plot) {
    if (neighbor) {
        $(".jqplot-highlighter-tooltip").html("" + plot.axes.xaxis.ticks[neighbor.pointIndex][1] + ", " + datapos.yaxis.toFixed(2) + " Oi");
    }
});

请参考这个可工作的代码示例。

- Boro

---

谢谢您的回复。这个解决方案很快速且易于使用。我只需复制/粘贴，将“#chart”更改为与我的匹配，然后它就可以工作了。 - Jake

Answer 2

没有尝试过，但是这段代码似乎可以实现您的期望 https://gist.github.com/2422033

这里是 JqPlot 文档上的链接 highlighter plugin。请检查 tooltipAxes 属性

这里有一个解决方案的链接，可以在工具提示中显示系列名称，这不是默认支持的。请查看评论 #1 https://bitbucket.org/cleonello/jqplot/issue/109/enable-highlighter-tooltip-to-display-label-of-the-series-on#comment-65301

- sdespont

---

+1 以示有趣的链接。虽然我尽可能避免更改 jqPlot 脚本，因此我提供了另一个答案。 - Boro