以编程方式在绘图上设置标记 [英] Programmatically set the marker on a plot
问题描述
我想知道是否可以以编程方式突出显示绘图上的标记。
I would like to know if it is possible to programmatically highlight the marker on a plot.
我有一个折线图和一个单独的数据网格。
I have a line graph and a separate data grid.
单击折线图中的标记将突出显示数据网格中的相关行，单击数据网格中的一行将突出显示折线图中的相关标志。
Clicking a marker within the line chart will highlight the relevant row in the data grid, and clicking a row in the data grid will highlight the relevant marker in the line chart.
在下面的示例中，我可以执行第一个要求。 $（'＃chartdiv'）。bind（'jqplotDataClick'，函数（ev，seriesIndex，pointIndex，data）返回可用于查找相关数据的数据点网格行。
In the example below I can do the first requirement. $('#chartdiv').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) returns the data point which I can use to find the relevant data grid row.
但是我被困在相反的地方。
But I'm stuck on the reverse.
在我的示例中，我替换了datagrid
In my example I have replaced the datagrid with a button for simplicity.
是否有 SetSelectedMarker 或一些我不知道的类似方法？
Is there a SetSelectedMarker or some similar method I don't know?
<!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>
推荐答案
我提出了一些答案。我认为@Mark如果知道如何弹出荧光笔，可能会知道更好的选择。因为我知道如何获得合适的位置，所以我不确定如何调用荧光笔然后在此坐标处绘画。
I have come up with some answer. I think @Mark might know a better option if he knows how to popup the highlighter. Since I know how to get appropriate position that you are after, just I am not sure how to call the highlighter then to paint at this coordinates.
我只是在获取坐标以像素为单位的网格。然后抓取高光画布并在其中绘制一个圆圈，事先总是调用 replot（）进行新的绘制。
尝试多次使用按钮，以查看它如何遍历数据的每个点。
如果您知道人们如何进行改进，例如，如何避免每次重新部署，那么请让我知道。
I am simply getting the coordinates of the grid in pixels. Then grabbing highlight canvas and painting a circle there, beforehand always calling replot() to have a fresh plot.
Try using the button few times to see how it goes over every point of the data.
If you know guys how to improve it, for example, how to avoid reploting each time, then please do let me know.
这篇关于以编程方式在绘图上设置标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
