条形图上的jqplot工具提示

我正在使用jquery插件jqplot绘制一些条形图。 在hover时，我想在工具提示中显示栏的刻度及其值。 我试过了

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', ... ）我设置了鼠标hover绑定，正如一些示例所示。我修改它像这样：

  $('#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 。

希望这对别人有帮助！

Answer 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的大小。