我想知道是否可以以编程方式突出显示标记上的标记。
我有一个折线图和一个单独的数据网格。
单击折线图中的标记将突出显示数据网格中的相关行,单击数据网格中的行将突出显示折线图中的相关标记。
在下面的例子中,我可以做第一个要求。 $('#chartdiv').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data)
返回我可用于查找相关数据网格行的数据点。
但是我反而坚持了。
在我的示例中,为了简单起见,我已使用按钮替换了数据网格。
是否有SetSelectedMarker
或类似的方法我不知道?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jqPlot examples</title>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/jquery.jqplot.1.0.0r1095/dist/excanvas.min.js"></script><![endif]-->
<!-- jQuery runtime minified -->
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
ul.tooltip
{
list-style-type:none;
padding:0px;
margin:0px;
}
</style>
<script class="include" type="text/javascript" src="js/jquery.jqplot.1.0.0r1095/dist/jquery.jqplot.min.js"></script>
<script class="include" type="text/javascript" src="js/jquery.jqplot.1.0.0r1095/dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script class="include" type="text/javascript" src="js/jquery.jqplot.1.0.0r1095/dist/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script class="include" type="text/javascript" src="js/jquery.jqplot.1.0.0r1095/dist/plugins/jqplot.highlighter.js"></script>
<script type="text/javascript">
// We use a document ready jquery function.
$(document).ready(function () {
// Some simple loops to build up data arrays.
var cosPoints = [];
for (var i = 0; i < 2 * Math.PI; i += 0.4) {
cosPoints.push([i, Math.cos(i)]);
}
var plot3 = $.jqplot('chartdiv', [cosPoints],
{
highlighter: {
show: true
, showTooltip: true
, tooltipLocation: 'ne'
, tooltipAxes: 'xy'
, useAxesFormatters: null
, formatString: '<div><ul class="tooltip"><li>%.4f</li><li>%.6f</li></ul></div>'
},
title: 'Line Style Options',
// Series options are specified as an array of objects, one object
series: [
{
// Change our line width and use a diamond shaped marker.
lineWidth: 2,
color: 'red',
markerOptions: { style: 'dimaond', color: 'black' }
},
{
// Don't show a line, just show markers.
// Make the markers 7 pixels with an 'x' style
showLine: false,
markerOptions: { size: 7, style: "x" }
},
{
// Use (open) circlular markers.
markerOptions: { style: "circle" }
},
{
// Use a thicker, 5 pixel line and 10 pixel
// filled square markers.
lineWidth: 5,
markerOptions: { style: "filledSquare", size: 10 }
}
]
, cursor: { show: true, showTooltip: true }
}
);
$('#chartdiv').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) {
alert(data);
});
$('#button').bind("click", function () {
DoSomeThing(plot3);
});
});
function DoSomeThing(plot) {
// *** highlight point in plot ***
}
</script>
</head>
<body>
<!--plot container-->
<div id="chartdiv" style="height:400px;width:600px; "></div>
<input id="button" type="button" value="click"/>
</body>
</html>
感谢您的帮助
答案 0 :(得分:5)
我想出了一些答案。如果他知道如何弹出荧光笔,我认为@Mark可能知道更好的选择。因为我知道如何获得你所追求的合适位置,所以我不知道如何调用荧光笔然后在这个坐标处绘画。
我只是以像素为单位获取网格的坐标。然后抓住高亮帆布并在那里画一个圆圈,事先总是打电话给replot()
以获得一个新的情节。
尝试使用该按钮几次,看看它是如何覆盖数据的每个点。
如果你知道如何改进它,例如,如何避免每次重新绘制,那么请告诉我。
答案 1 :(得分:1)
你可以实现高亮插件中使用的绘图功能 如图所示。 另一种选择可能是更改插件本身并创建新事件或公开绘图功能等。
只要您将鼠标移动到折线图中的另一个标记上,突出显示的标记就会改变,但这是可以预期的。
当标记设置为高亮显示时,显示工具提示会很不错。
function DoSomeThing(plot) {
var hl = plot.plugins.highlighter;
var s = plot.series[0];
var smr = s.markerRenderer;
var mr = hl.markerRenderer;
mr.style = smr.style;
mr.lineWidth = smr.lineWidth + hl.lineWidthAdjust;
mr.size = smr.size + hl.sizeAdjust;
var rgba = $.jqplot.getColorComponents(smr.color);
var newrgb = [rgba[0], rgba[1], rgba[2]];
var alpha = (rgba[3] >= 0.6) ? rgba[3]*0.6 : rgba[3]*(2-rgba[3]);
mr.color = 'rgba('+newrgb[0]+','+newrgb[1]+','+newrgb[2]+','+alpha+')';
mr.init();
mr.draw(s.gridData[3][0], s.gridData[3][1], hl.highlightCanvas._ctx);
}
答案 2 :(得分:0)
如果要更改颜色,请尝试使用新系列颜色修改选项字符串,因为该函数仅返回单击的点。但你必须自己手动改变颜色。