我正在尝试为线图获取自定义工具提示，因为我希望工具提示更详细地描述点而不是该点的值。 （图片附有进一步说明我的内容）
我尝试过如何做到这一点。
以下是我的代码：
<script type="text/javascript"> $('#page3a').live('pageshow', function () {
var s1 = [1, 2, 3, 4, 5];
var s2 = ["Message 1", "Message 2", "Message 3", "Message 4", "Message 5"];
var lineGraph1 = $.jqplot('lineGraph1', [s1,s2], {
animate: true,
seriesDefault: {
showMarker: false,
pointLabels: { show: true }
},
grid: {
drawBorder: false,
drawGridlines: false,
background: '#eafaff',
shadow: false
},
axesDefaults: {
show: false,
showTicks: false,
showTickMarks: false
},
highlighter: {
show: true,
sizeAdjust: 8,
tooltipLocation: 'n',
tooltipAxes: 'piered',
formatString:'%s',
fadeTooltip: true,
tooltipFadeSpeed: "fast",
useAxesFormatters: false
}
});
});</script>
非常感谢任何帮助。 ：）
答案 0 :(得分：7)
有一个配置选项允许您提供一个自定义回调方法，该方法被调用以检索工具提示内容：
highlighter: {
tooltipContentEditor: function (str, seriesIndex, pointIndex) {
return str + "<br/> additional data";
},
// other options just for completeness
show: true,
showTooltip: true,
tooltipFade: true,
sizeAdjust: 10,
formatString: '%s',
tooltipLocation: 'n',
useAxesFormatters: false,
}
答案 1 :(得分：3)
我对nick_w的回答做了一些修改。 但是我现在有了预期的效果，只是粘贴代码以帮助其他人。
<script type="text/javascript">
$('#page3a').live('pageshow', function () {
var s1 = [1, 2, 3, 4, 5];
var s2 = ["Message 1", "Message 2", "Message 3", "Message 4", "Message 5"];
var lineGraph1 = $.jqplot('lineGraph1', [s1, s2], {
animate: true,
seriesDefault: {
showMarker: false,
pointLabels: { show: true }
},
grid: {
drawBorder: false,
drawGridlines: false,
background: '#eafaff',
shadow: false
},
axesDefaults: {
show: false,
showTicks: false,
showTickMarks: false
}
});
$('#lineGraph1').bind('jqplotDataMouseOver', function (ev, seriesIndex, pointIndex, data) {
var mouseX = ev.mouseX; //these are going to be how jquery knows where to put the div that will be our tooltip
var mouseY = ev.mouseY;
$('#chartpseudotooltip').html(s2[pointIndex] );
var cssObj = {
'position': 'absolute',
'font-weight': 'bold',
'left': mouseX + 'px', //usually needs more offset here
'top': mouseY + 'px',
'background-color': 'white',
'z-index':'1'
};
$('#chartpseudotooltip').css(cssObj);
});
$('#lineGraph1').bind('jqplotDataUnhighlight', function (ev) {
$('#chartpseudotooltip').html('');
});
});</script>
要调用此脚本，我的内容div中会添加以下内容。
<div id="lineGraph1" style="margin-top: 20px; margin-left: 160px; width: 350px; height: 350px">
<div id="chartpseudotooltip"></div>
答案 2 :(得分：2)
如果您总是希望在点值之前添加文本“Message”，则只需将其添加到formatString中：
highlighter:{
show: true,
formatString: 'Message %s',
//other stuff like sizeAdjust...
}
如果它对应于你想要显示的刻度线，你也可以使用你的s2变量：
axes: {
yaxis: {
ticks: s2,
tickRenderer: ...
}
}
答案 3 :(得分：0)
<script type="text/javascript"> $('#page3a').live('pageshow', function () {
var s1 = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5]];
var s2 = [["Message 1"], ["Message 2"], ["Message 3"], ["Message 4"], ["Message 5"]];
var lineGraph1 = $.jqplot('lineGraph1', [s1,s2], {
seriesDefault: {
showMarker: false,
pointLabels: { show: true }
},
grid: {
drawBorder: false,
drawGridlines: false,
background: '#eafaff',
shadow: false
},
axes: {
xaxis: {ticks: s2}
},
highlighter: {
show: true,
sizeAdjust: 8,
tooltipLocation: 'n',
tooltipAxes: 'x',
formatString: '%s',
}
});
});</script>
答案 4 :(得分：0)
这样的事情（改编自jqplot tooltip on bar chart）？
$('#lineGraph1').bind('jqplotDataMouseOver', 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(s2[pointIndex] + ', (' + data[0] +', ' + data[1] + ')');
var cssObj = {
'position' : 'absolute',
'font-weight' : 'bold',
'left' : mouseX + 'px', //usually needs more offset here
'top' : mouseY + 'px',
'background-color': 'white'
};
$('#chartpseudotooltip').css(cssObj);
});
$('#lineGraph1').bind('jqplotDataUnhighlight', function (ev) {
$('#chartpseudotooltip').html('');
});
当鼠标经过数据点时，这将绘制Message X, (x_value, y_value)形式的小工具提示。然后，您可以进一步设置工具提示的样式以适应。
在此示例中，工具提示如下：
<div id="chartpseudotooltip"></div>
答案 5 :(得分：0)
您可以在此处获得答案jsfiddle
var line1=[['10/17/2013',21],['1/30/2014',3],['11/1/2013',12],['10/2/2013',3],['11/5/2013',18]];
var line2=[['10/17/2013',41],['1/30/2014',33],['11/1/2013',12],['10/2/2013',63],['11/5/2013',18]];
var plot1 = $.jqplot('linegraph1', [line1,line2],{
seriesDefaults: {
lineWidth: 1,
markerOptions: {
show: true, // wether to show data point markers.
style: 'filledCircle', // circle, diamond, square, filledCircle.
size: 2 // size (diameter, edge length, etc.) of the marker.
}},
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{
formatString:'%b %#d',
showGridline: false
}
},
yaxis:{min:0,numberTicks:25,
tickOptions:{
showGridline: false
}
}
},
legend :
{
"show" : true,
location: 'se'
},
series : [
{
label : "line1",highlighter: {formatString: "<div style='text-align:center;'><span>%s </span><br/><span> Blue: %s <br/>custom tooltip<span></div>"}
},
{
label : "line2",highlighter: {formatString: "<div style='text-align:center;'><span>%s </span><br/><span> Orange: %s <br/>custom tooltip<span></div>"},
}
],
highlighter: {
show: true,
sizeAdjust: 25.5,
tooltipLocation: 's'
}
});