Настраиваемая подсказка на линейной диаграмме JQPlot
Я пытаюсь получить настраиваемую подсказку для линейного графика, поскольку хочу, чтобы подсказка описывала точки более подробно, а не значение этой точки. (Прикрепленное изображение объясняет, о чем я)
Я дал попытку, как это сделать.
Ниже мой код:
<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>
Любая помощь будет принята с благодарностью.:)
6 ответов
Решение
Я внес небольшие правки в ответ 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>
Существует опция конфигурации, которая позволяет вам предоставить пользовательский метод обратного вызова, который вызывается для получения содержимого всплывающей подсказки:
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,
}
Если вам всегда нужен текст "Сообщение" перед значением точки, вам просто нужно добавить его в formatString:
highlighter:{
show: true,
formatString: 'Message %s',
//other stuff like sizeAdjust...
}
Вы также можете использовать переменную s2, если она соответствует тикам, которые вы хотите отобразить:
axes: {
yaxis: {
ticks: s2,
tickRenderer: ...
}
}
Как насчет этого (адаптировано из всплывающей подсказки jqplot на гистограмме)?
$('#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>
Вы можете получить ответ здесь 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'
}
});
<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>