条形图上的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轴将会变得杂乱无章.

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];
}

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有当前突出显示的栏#​​.基本上我们将使用它来获取刻度线.

然后我设置了工具提示的样式,使其显示在鼠标光标所在的位置附近.你可能会需要从减去mouseX和mouseY一点,如果这个div在其他定位的容器.

然后你可以#chartpseudotooltip在你的CSS中设计风格.如果你想要默认样式,你可以将它添加到.jqplot-highlighter-tooltipjqplot.css中.

希望这对别人有帮助!