我正在使用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轴将会变得混乱而且有点混乱。
答案 0 :(得分:30)
我浏览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];
}
答案 1 :(得分:22)
没关系,我做了一个迂回的方式来通过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.css中的.jqplot-highlighter-tooltip
。
希望这对其他人有帮助!
答案 2 :(得分:2)
我在以下链接中使用了荧光笔插件的版本:
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的大小。