Salve ragazzi... premesso che sono ancora neofita di javascript e delle sue molteplici applicazioni... di seguito vi riporto il codice della pagina che ho intenzione id creare... la tabella a due colonne la prima colonne è il tempo la seconda i kw... quello che vorrei fare è crea un grafico che utilizzi come x la prima colonna e come y al seconda colonna. la curva sarà quindi una spezzata che unisce tutti i punti... Su un forum ho trovato finalmente la maniera per disegnare un segmento... Quando utilizzo il codice da solo e avvio con il browser mi da la linea tranqulliamente ... ma quando immetto il codice all'interno del file che contiene le tabelle... non mi compare più... come mai? potete aiutarmi. ( mi interessa solo far visualizzare il segmento)
codice completo
<!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 name="keywords" content="graph, graphs, graphing, JavaScript, DHTML, Clymer, function, functions">
<title>INSERIMENTO CURVA HRR</title>
</head>
<style>
h3
{
color:ORANGE;
font-family:"arial";
}
h5
{
color:black;background-colorrange;
font-family:"arial";
}
#insdat
{
color
font-family:"arial";
}
.style1 {
text-align: center;
}
</style>
<body>
<script type="text/javascript">
var hrrt= new Array(),hrrw=new Array()
Ax=0;
Bx=800;
Ay=0;
By=600;
bla = "."
var lineLength = Math.sqrt( (Ax-Bx)*(Ax-Bx)+(Ay-By)*(Ay-By) );
for( var i=0; i<lineLength; i++ )
{
bla += "<div style='position:absolute;left:"+ Math.round( Ax+(Bx-Ax)*i/lineLength ) +"px;top:"+ Math.round( Ay+(By-Ay)*i/lineLength ) +"px;width:1px;height:1px;background:#000'></div>";
}
document.body.innerHTML += bla
// function TRASFERIMENTO(){
//for (var=1; i=12; i++)
//{
//hrrw[i]=self.document.formfiglia.testofiglia.value;
//window.opener.document.form1.testo1.value=hrrw[i];
//}
//}
</script>
</head>
<body >
<table style="width: 13%">
<tr>
<td style="width: 175px">
<table style="width: 15%">
<tr>
<td style="width: 80px" class="style1">
Time
[s]</td>
<td style="width: 80px" class="style1">
Hrr [W]</td>
</tr>
<tr>
<td style="width: 80px" class="style1">
<input type="text" name="time1" size="20" value="0" style="width: 80px"></td>
<td style="width: 80px" class="style1">
<input type="text" name="kw1" size="20" value="0" style="width: 80px"></td>
</tr>
<tr>
<td style="width: 80px" class="style1">
<input type="text" name="time2" size="20" value="300" style="width: 80px"></td>
<td style="width: 80px" class="style1">
<input type="text" name="kw2" size="20" value="200" style="width: 80px"></td>
</tr>
<tr>
<td style="width: 80px" class="style1">
<input type="text" name="time3" size="20" value="600" style="width: 80px"></td>
<td style="width: 80px" class="style1">
<input type="text" name="kw3" size="20" value="500" style="width: 80px"></td>
</tr>
<tr>
<td style="width: 80px" class="style1">
<input type="text" name="time4" size="20" value="900" style="width: 80px"></td>
<td style="width: 80px" class="style1">
<input type="text" name="kw4" size="20" value="900" style="width: 80px"></td>
</tr>
<tr>
<td style="width: 80px" class="style1">
<input type="text" name="time5" size="20" value="1200" style="width: 80px"></td>
<td style="width: 80px" class="style1">
<input type="text" name="kw5" size="20" value="1600" style="width: 80px"></td>
</tr>
<tr>
<td style="width: 80px" class="style1">
<input type="text" name="time6" size="20" value="1500" style="width: 80px"></td>
<td style="width: 80px" class="style1">
<input type="text" name="kw6" size="20" value="2200" style="width: 80px"></td>
</tr>
<tr>
<td style="width: 80px" class="style1">
<input type="text" name="time7" size="20" value="1800" style="width: 80px"></td>
<td style="width: 80px" class="style1">
<input type="text" name="kw7" size="20" value="1400" style="width: 80px"></td>
</tr>
<tr>
<td style="width: 80px" class="style1">
<input type="text" name="time8" size="20" value="2100" style="width: 80px"></td>
<td style="width: 80px" class="style1">
<input type="text" name="kw8" size="20" value="700" style="width: 80px"></td>
</tr>
<tr>
<td style="width: 80px" class="style1">
<input type="text" name="time9" size="20" value="2400" style="width: 80px"></td>
<td style="width: 80px" class="style1">
<input type="text" name="kw9" size="20" value="200" style="width: 80px"></td>
</tr>
<tr>
<td style="width: 80px" class="style1">
<input type="text" name="time10" size="20" value="2700" style="width: 80px"></td>
<td style="width: 80px" class="style1">
<input type="text" name="kw10" size="20" value="100" style="width: 80px"></td>
</tr>
<tr>
<td style="width: 80px" class="style1">
<input type="text" name="time11" size="20" value="3000" style="width: 80px"></td>
<td style="width: 80px" class="style1">
<input type="text" name="kw11" size="20" value="0" style="width: 80px"></td>
</tr>
<tr>
<td style="width: 80px" class="style1">
<input type="text" name="time" size="20" value="3300" style="width: 80px"></td>
<td style="width: 80px" class="style1">
<input type="text" name="kw" size="20" value="0" style="width: 80px"></td>
</tr>
</table>
</td>
<td style="width: 898px"></td>
</tr>
</table>
<input type="button" value="trsferisci" name="B1" onClick="tras()" style="width: 170px">
</p>
</body>
</html>
codice linea da solo
Ax=0;
Bx=800;
Ay=0;
By=600;
bla = "."
var lineLength = Math.sqrt( (Ax-Bx)*(Ax-Bx)+(Ay-By)*(Ay-By) );
for( var i=0; i<lineLength; i++ )
{
bla += "<div style='position:absolute;left:"+ Math.round( Ax+(Bx-Ax)*i/lineLength ) +"px;top:"+ Math.round( Ay+(By-Ay)*i/lineLength ) +"px;width:1px;height:1px;background:#000'></div>";
}
document.body.innerHTML += bla
Grazie a tutti!!! E per favore... se potete datemi una mano...
Rispondi quotando