[英]jqplot tooltip on bar chart
我正在使用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轴将会变得杂乱无章。
我通过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];
}
没关系,我做了一个迂回的方式来通过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
。
希望这对别人有帮助!
我在以下链接上使用了荧光笔插件的版本:
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的大小。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.