jqplot柱状图上的工具提示

Question

我正在使用jquery插件jqplot来绘制一些条形图。当鼠标悬停在上面时，我希望在工具提示中显示该条的刻度和值。我已经尝试过

highlighter: { show: true, 
            showTooltip: true,      // show a tooltip with data point values.
            tooltipLocation: 'nw',  // location of tooltip: n, ne, e, se, s, sw, w, nw.
            tooltipAxes: 'both',    // which axis values to display in the tooltip, x, y or both.
            lineWidthAdjust: 2.5   // pixels to add to the size line stroking the data point marker
            }

但是它并没有起作用。柱状图的颜色在视觉上变浅了，顶部有一个小点（理想情况下应该消失--可能是由于折线图渲染器的问题），但是没有任何工具提示。有人知道我该如何做吗？我会有很多条柱状图，如果只在下面显示它们，那么x轴将会很混乱。

- butterywombat

Answer 1

我查看了jqplot.highlighter.js，发现了一个没有文档记录的属性：tooltipContentEditor。我使用它来自定义提示框以显示x轴标签。

可以像这样使用：

highlighter:{
        show:true,
        tooltipContentEditor:tooltipContentEditor
    },

function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
    // display series_label, x-axis_tick, y-axis value
    return plot.series[seriesIndex]["label"] + ", " + plot.data[seriesIndex][pointIndex];
}

- duckegg

---

很棒的属性/回调解决方案。这会对我有很大帮助。 - brunobord

Answer 2

没事了，我用jquery绕了一个弯来创建自己的工具提示。

我保留了问题中我的高亮设置（虽然您可能不需要工具提示相关内容）。

在我的js文件中，在柱状图设置完毕之后（在 $.jqplot('chart', ... 之后），我设置了一个鼠标悬停绑定，就像一些示例所显示的那样。我进行了修改：

 $('#mychartdiv').bind('jqplotDataHighlight', 
        function (ev, seriesIndex, pointIndex, data ) {
            var mouseX = ev.pageX; //these are going to be how jquery knows where to put the div that will be our tooltip
            var mouseY = ev.pageY;
            $('#chartpseudotooltip').html(ticks_array[pointIndex] + ', ' + data[1]);
            var cssObj = {
                  'position' : 'absolute',
                  'font-weight' : 'bold',
                  'left' : mouseX + 'px', //usually needs more offset here
                  'top' : mouseY + 'px'
                };
            $('#chartpseudotooltip').css(cssObj);
            }
    );    

    $('#chartv').bind('jqplotDataUnhighlight', 
        function (ev) {
            $('#chartpseudotooltip').html('');
        }
    );

说明：

ticks_array 是先前定义的，包含x轴刻度字符串。jqplot的data将你鼠标下的当前数据表示为[x-category-#, y-value]类型的数组。pointIndex有当前突出显示的条形图#。 基本上我们将使用这个来获取刻度字符串。

然后我样式化了工具提示，使其出现在鼠标指针附近。如果此div在其他定位的容器中，则可能需要从mouseX和mouseY减去一点。

您可以在CSS中对#chartpseudotooltip进行样式设置。如果您想要默认样式，只需将其添加到.jqplot-highlighter-tooltip中即可.

希望这对其他人有所帮助！

- butterywombat

---

那你应该把这个分享在这里，这样就能帮助到其他遇到同样问题的人了。 - jcolebrand

@butterywombat：我现在和你一样有同样的问题，我试图将你的代码与我的代码结合起来，但是我没有看到任何关于工具提示的变化。我对jquery非常陌生，想请教一些建议，特别是关于“#mychartdiv”和“#chartv”，我需要定义这两个吗？非常感谢。 :) - Ianthe

哦不，我没有收到那个消息...嗯 一年后回复 我想我在将我的代码粘贴到 Stack Overflow 时没有将“#chartv”更改为“#mychartdiv”。所以我很确定 #chartv 应该写成 #mychartdiv。您可以将它们放在 html 文件中，以便在需要出现图表的地方进行绘制。 - butterywombat

Answer 3

我正在使用以下链接中的highlighter插件版本：https://github.com/tryolabs/jqplot-highlighter 我使用的参数如下：

highlighter: {
    show:true,
    tooltipLocation: 'n',
    tooltipAxes: 'pieref', // exclusive to this version
    tooltipAxisX: 20, // exclusive to this version
    tooltipAxisY: 20, // exclusive to this version
    useAxesFormatters: false,
    formatString:'%s, %P',
}

新参数确保工具提示出现的位置固定。我更喜欢将其放在左上角，以避免调整容器 div 大小时出现问题。

- Wagner Dias