Si tratta di un metodo molto semplice di implementare nel Web grafici di gradevole visualizzazione ed anche dinamici con poche linee di codice
L'esempio che riporto di seguito e' per uno scatterplot XY in cui e' possibile zommare ed effettuare pan in modo dinamico
il codice completo che genera l'esempio e' il seguente
--------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="./lib/jquery.js"></script>
<script language="javascript" type="text/javascript" src="./lib/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="./lib/jquery.flot.navigate.js"></script>
</head>
<body>
<div id="placeholder" style="width:600px;height:300px;"></div>
<script type="text/javascript">
$(function () {
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
d1.push([i, Math.sin(i)]);
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
var options = {
series: { lines: { show: true }, shadowSize: 0 },
xaxis: { zoomRange: [0.1, 20], panRange: [-20, 20] },
yaxis: { zoomRange: [0.1, 20], panRange: [-20, 20] },
zoom: {
interactive: true
},
pan: {
interactive: true
}
};
$.plot($("#placeholder"), [ d1, d2],options);
});
</script>
</body>
</html>
---------------------------------------------------------------
il grafico e' definito dal div placeholder e qui sono descritte anche le dimensioni del grafico stesso.
Ci sono due serie di dati, una definita da una funzione e l'altra da punti, e sono descritte anche le caratteristiche del grafico mediante la variabile option.
La dinamicita' del grafico e' data dai settaggi di zoom e pan come interactive (per questa funzione si deve aggiungere il riferimento a jquery.flot.navigate.js)
semplice, veloce e di effetto
Nessun commento:
Posta un commento