Programar el marcador programáticamente en una trama.
Me gustaría saber si es posible resaltar programáticamente el marcador en un gráfico.
Tengo un gráfico de líneas y una cuadrícula de datos por separado.
Al hacer clic en un marcador dentro del gráfico de líneas, se resaltará la fila correspondiente en la cuadrícula de datos, y al hacer clic en una fila en la cuadrícula de datos, se resaltará el marcador relevante en el gráfico de líneas.
En el siguiente ejemplo puedo hacer el primer requisito.$('#chartdiv').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) devuelve el punto de datos que puedo usar para encontrar la fila correspondiente de la cuadrícula de datos.
Pero estoy atascado en el reverso.
En mi ejemplo, he reemplazado el datagrid con un botón para simplificar.
Hay unSetSelectedMarker ¿O algún método similar no lo sé?
<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>Gracias por cualquier ayuda