Definir programaticamente o marcador em um gráfico
Eu gostaria de saber se é possível destacar programaticamente o marcador em um gráfico.
Eu tenho um gráfico de linhas e uma grade de dados separada.
Clicar em um marcador no gráfico de linhas destacará a linha relevante na grade de dados e, ao clicar em uma linha na grade de dados, o marcador relevante será destacado no gráfico de linhas.
No exemplo abaixo, posso fazer o primeiro requisito.$('#chartdiv').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data)
retorna o ponto de dados que eu posso usar para encontrar a linha da grade de dados relevante.
Mas estou preso no reverso.
No meu exemplo, substituí o datagrid por um botão para simplificar.
Tem algumaSetSelectedMarker
ou algum método semelhante eu não sei?
<code><!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> </code>
Obrigado por qualquer ajuda