Javascript 条形图上的 jqplot 工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4889464/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jqplot tooltip on bar chart
提问by butterywombat
I'm using the jquery plugin jqplot for plotting some bar charts. on hover, I'd like to display the tick for the bar and its value on a tooltip. I've tried
我正在使用 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
}
but it doesn't work. the bar visually gets lighter, and there's a small dot on the top (which would ideally go away--probably from line chart renderer stuff), but there is no tooltip anywhere. Anyone know how I can do this? I'll have lots of bars so the x-axis will be cluttered and kind of a mess if I show them down there only.
但它不起作用。栏在视觉上变得更轻，顶部有一个小点（理想情况下会消失 - 可能来自折线图渲染器的东西），但任何地方都没有工具提示。有谁知道我怎么能做到这一点？我会有很多条形，所以如果我只把它们显示在那里，x 轴会变得混乱和混乱。
回答by duckegg
I go through jqplot.highlighter.js and find an undocumented property: tooltipContentEditor.
I use it to customize the tooltip to display x-axis label.
我浏览了 jqplot.highlighter.js 并找到了一个未记录的属性：tooltipContentEditor. 我用它来自定义工具提示以显示 x 轴标签。
Use something like this:
使用这样的东西：
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];
}
回答by butterywombat
nevermind, I did a roundabout way to create my own tooltip via jquery.
没关系，我做了一个迂回的方式通过 jquery 创建我自己的工具提示。
I left my highlighter settings as they were in my question (though you probably don't need the tooltip stuff).
我保留了我的荧光笔设置，因为它们在我的问题中（尽管您可能不需要工具提示的东西）。
In my js file after the bar chart is set up (after $.jqplot('chart', ...) I set up an on mouse hover binding, as some of the examples showed. I modified it like this:
在设置条形图之后（之后$.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('');
}
);
explanation:
ticks_arrayis previously defined, containing the x axis tick strings. jqplot's datahas the current data under your mouse as an [x-category-#, y-value] type array. pointIndexhas the current highlighted bar #. Basically we will use this to get the tick string.
解释：
ticks_array是之前定义的，包含 x 轴刻度字符串。jqplotdata将鼠标下的当前数据作为 [x-category-#, y-value] 类型数组。pointIndex具有当前突出显示的栏 #。基本上我们将使用它来获取刻度字符串。
Then I styled the tooltip so that it appears close to where the mouse cursor is. You will probably need to subtract from mouseXand mouseYa bit if this div is in other positioned containers.
然后我设置了工具提示的样式，使其看起来靠近鼠标光标所在的位置。你可能会需要从减去mouseX和mouseY一点，如果这个div在其他定位的容器。
you can then style #chartpseudotooltipin your css. If you want the default styles you can just add it to .jqplot-highlighter-tooltipin the the jqplot.css.
然后你可以#chartpseudotooltip在你的css中设置样式。如果你想要默认样式，你可以将它添加到.jqplot-highlighter-tooltipjqplot.css 中。
hope this is helpful to others!
希望这对其他人有帮助！
回答by Wagner Dias
I am using the version of the highlighter plugin on the following link:
我正在使用以下链接上的荧光笔插件版本：
https://github.com/tryolabs/jqplot-highlighter
https://github.com/tryolabs/jqplot-highlighter
The parameters I am using:
我使用的参数：
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',
}
The new parameters ensure a fixed location where the tooltip will appear. I prefer to place it on the upper left corner to avoid problems with resizing the container div.
新参数确保工具提示出现的固定位置。我更喜欢将它放在左上角以避免调整容器 div 的大小时出现问题。
