jQplot dragable

Estoy usando jQplot dentro de jQuery y estoy tratando de hacer que los puntos sean dragables. jqplot tiene esta funcionalidad a través del jqplot.dragable plugin jQplot dragable

Debo decir que soy nuevo en jQplot, pero lo tengo trazando mi información correctamente.

Creo que estoy usando el dragability option correctamente. (Use ese enlace y encuentre 'dragable:' para ver un ejemplo), pero algo debe estar mal en mi código.

Aquí está mi código. Cualquier ayuda es muy apreciada.

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script language="javascript" type="text/javascript" src="javascript/jquery-1.5.2.min.js"></script> 
<script language="javascript" type="text/javascript" src="javascript/jqplot/jquery.jqplot.js"></script> 
<script language="javascript" type="text/javascript" src="javascript/jqplot/plugins/jqplot.highlighter.js"></script> 
<script language="javascript" type="text/javascript" src="javascript/jqplot/plugins/jqplot.dateAxisRenderer.js"></script> 
<script language="javascript" type="text/javascript" src="javascript/jqplot/plugins/jqplot.barRenderer.js"></script> 
<script language="javascript" type="text/javascript" src="javascript/jqplot/plugins/jqplot.dragable.js"></script> 

<style type="text/css"> 
.jqplot-axis { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 90%; 
} 
.jqplot-highlighter-tooltip { 
    background-color: #CCC; 
    padding: 5px; 
    border-radius: 5px; 
} 
</style> 

<script language="javascript" type="text/javascript"> 
$(function() { 
    <?php 
     $series = ""; 

     $start = strtotime("Jan 1 2001 00:00:00"); 
     $end = strtotime("Dec 31 2001 00:00:00"); 
     for ($i = $start; $i <= $end; $i += 432000) { 
      if ($i > $start) { 
       $series .= ", "; 
      } 
      $series .= "['" . date("m/d/Y", $i) . " 00:00:00', 2]"; 
     } 
    ?> 

    var series = [<?php echo $series; ?>]; 

    var plot1 = $.jqplot('Chart1', [series], { 
     seriesDefaults: { 

     }, 
     series: [ 
      { label: 'Importance' } 
     ], 
     axes: { 
      xaxis: { 
       renderer: $.jqplot.DateAxisRenderer, 
       tickOptions: { formatString: '%b %e' }, 
       min: "12-27-2000 00:00:00", 
       max: "12-31-2001 00:00:00", 
       tickInterval: "15 days" 
      }, 
      yaxis: { 
       min: -10, 
       max: 10 
      } 
     }, 
     highlighter: { 
      show: true, 
      showMarker: false, 
      tooltipAxes: 'xy', 
      formatString: '%s<br />%s' 
     }, 
     dragable: { 
      color: '#FF0000', 
      constrainTo: 'none' 
     } 
    }); 

    var xaxis = $('.jqplot-axis.jqplot-xaxis div'); 
    xaxis.first().css('display', 'none'); 
    xaxis.last().css('display', 'none'); 
}); 
</script> 
</head> 

<body> 
<div id='Chart1'></div> 
</body> 
</html>

Fuente

2011-05-31 James

Pude encontrar la respuesta. 'dragable' no es una opción de configuración en la base del objeto jqplot. 'dragable' es una opción de configuración dentro de una 'serie'. Además, la serie debe tener 'isDragable' establecido en verdadero.

Aquí el código modificado para la opción de configuración 'serie'.

series: [ 
    { 
     label: 'Importance', 
     dragable: { 
      color: undefined, 
      constrainTo: 'y' 
     }, 
     isDragable: true 
    } 
],

Fuente

2011-06-01 15:29:33 James

Respuesta

Cuestiones relacionadas