jsfidle中的以下代码显示了某些点的图像和文本。
问题是我没有找到一种方法来动态更改工具提示的位置,并且在某些点上图像显示在网格外部。
$(document).ready(function () {
var url= "http://cameraserraverde.com.br/img/"
var line1 = [['01', 650, ""], ['02', 600, url+"img_fev.jpg"], ['04', 330, url+"imagem_abr.jpg"], ['06', 280, ""], ['08', 230, url+"imagem_ago.jpg"], ['10', 320, url+"imagem_out.jpg"],['11', 600, url+"imagem_nov.jpg"], ['12', 630, ""]];
var plot2 = $.jqplot('test', [line1], {
seriesDefaults: {
rendererOptions: {
smooth: true
}
},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions:{formatString: "%b"},
tickInterval: '1 month'
}
},
series: [{ lineWidth: 2,
}],
highlighter: {
show: true,
useAxesFormatters: false,
tooltipContentEditor: tooltipContentEditor,
},
});
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
div = "<div>";
if (plot.data[seriesIndex][pointIndex][2] != ""){
div+= "<img src='" + plot.data[seriesIndex][pointIndex][2] + "''/>";
}
div+= "<figcaption style='text-align: center; background:#D0D0D0'>" + plot.data[seriesIndex][pointIndex][1] + "m</figcaption></div>"
return div;
}
});
如何定义与点位置相反的tooltipLocation
,例如,如果点在网格的象限“ ne
”上,则将tooltipLocation
定义为“ sw
” ?
[寻找解决方案,我发现this answer使我找到了解决方法。我没有找到更改tooltipLocation
的方法,但是通过更改div
的布局,我有了所需的位置。