Bonjour à tous,
J’ai un soucis avec le code HTML / javascript ci dessous.
N’ayant pas une grande expérince du javascript, j’ai besoin d’un avis éclairé.
Le but est tracé une courbe dans la case d’un tableau.
le code est simplifié mais la page réelle est chargée dasnle serveur web d’une eDbox d’eDevice. Le problème se voit très bien sur un PC, pas d’inquiétude.
Le code du script a été pompé sur
http://javascript.js-x.com/examples/example.php?title=Scatter%20Graphs
Merci d’avance
IMAX over last 24h
|
|
Intensité |
function Scatter() {
this.range = [0,1];
this.top = 0;
this.id = “myChart”;
this.left = 0;
this.height = 30;
this.width = 400;
this.borderWidth = 0;
this.borderStyle = “outset”;
this.lineWidth = 2;
this.parent = null;
this.hilightColor = “navy”;
this.k = 100;
this.onchange = function (newValue) {
newValue = parseInt(newValue);
if(newValue>=-100 && newValue<=100) {
this.k = newValue;
this.redraw();
}
}
this.getWrapperHTML = function () {
with(this)
return “<div style=“position:absolute;left:” + left + “px;” +
“top:” + top + “px;” +
“width:” + width + “px;” +
“height:” + height + “px;” +
“border-style:” + borderStyle + “;” +
“border-width:” + borderWidth + “px;’” +
" id=” + id + “>”;
}
this.values = [[0,0]];
this.redraw = function()
{
var tempstr = “”;
with(this)
{ values = []
for(var i=0;i<30;i++)
{ x = 30+i;
y = (300*(30 - i) + 200*i)/30;
values[values.length] = [x, y];
}//next
for(var i=0; i<values.length; i++)
{ tempstr += “<div style='position:absolute;background-Color:” + hilightColor +
“;left:” + (borderWidth + parseInt(values[i][0])) + “px;” +
“top:” + (height - 2 * borderWidth - parseInt(values[i][1])) + “px;” +
“width:” + lineWidth + “px;height:” + lineWidth + “px;font-size:0px”>";
}//next
document.getElementById(this.id).innerHTML = tempstr;
}//endwith
}//endprog
this.create = function()
{
document.body.innerHTML += this.getWrapperHTML();
this.redraw();
}//endprog
}
var tg;
function delay_this(){
tg = new Scatter();
with(tg) {
top = 35;
left = 100;
width = 690;
height = 400;
create();
}}
//setTimeout(“delay_this()”,1000);
delay_this()
</script></td>
</tr>
<tr>
<td style="width: 82px;"></td>
<td style="width: 761px;">
<table style="text-align: left; width: 746px; height: 26px;"
border=“0” cellpadding=“2” cellspacing=“2”>
|
0h |
1h |
2h |
3h |
4h |
5h |
6h |
7h |
8h |
9h |
10h |
11h |
12h |
13h |
14h |
15h |
16h |
17h |
18h |
19h |
20h |
21h |
22h |
23h |
Si tu as un serveur, tu as plus vite fait de générer l’image avec php/consort. Javascript n’est pas fait pour faire des graphiques, sauf si tu veux le faire ramer (3 secondes pour ton script, j’avais fait un truc du genre avec 80x80 images : 1 minute!)
Merci Sans-Nom, mais comme je l’ai mentionné, ce code est utilisé dans un web server embarqué eDevice http://www.edevice.com/content/solution/webserverfr.htm
donc pas de PHP ni autre. D’où l’utilisation de Javascript
Maintenant tu annonces 3 secondes, cela veut il dire que tu l’as fait marcher?