条形图上的 jqplot 工具提示答案

【问题标题】：jqplot tooltip on bar chart条形图上的 jqplot 工具提示
【发布时间】：2011-02-03 17:29:20
【问题描述】：

我正在使用 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 轴就会变得杂乱无章。

【问题讨论】：

标签： javascript jquery graph charts jqplot

【解决方案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];
}

【讨论】：

正确。这就是我一直在寻找的。谢谢！
很棒的属性/回调解决方案。这对我很有帮助。

【解决方案2】：

没关系，我做了一个迂回的方法来通过 jquery 创建我自己的工具提示。

我保留了我的荧光笔设置，因为它们在我的问题中（尽管您可能不需要工具提示的东西）。

在设置条形图之后（$.jqplot('chart', ... 之后）我的 js 文件中，我设置了鼠标悬停绑定，如一些示例所示。我是这样修改的：

 $('#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.css 中的.jqplot-highlighter-tooltip。

希望这对其他人有帮助！

【讨论】：

你应该在这里完全分享，然后帮助其他有同样问题的人
@butterywombat：我现在和你有同样的问题，我尝试将你的代码与我的代码合并，但我没有看到工具提示有任何变化。我对jquery真的很陌生，想请教一些建议。特别是在“#mychartdiv”和“#chartv”上，我需要定义这两个吗？非常感谢。 :)
哦，不，我没有收到那条消息...好吧 一年后回复 我想我没有将 '#chartv' 更改为 '#mychartdiv' 时我将代码粘贴到堆栈溢出中。所以我很确定#chartv 应该说#mychartdiv。您可以将它们放在您希望绘图出现的 html 文件中

【解决方案3】：

我在以下链接中使用荧光笔插件的版本：

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 大小时出现问题。

【讨论】：