nicht angemeldet
ich hab das jetzt alles soweit hinbekommen.
Jetzt hab ich nur noch ein Problem. Wenn ich das Diagramm mehrfach mit unterschiedlichen Werten einbinden möchte, dann rutschen alle Grafen auf die aller erste Zeichenebene und bei den anderen ist nur noch der leere Zeichenplatz zu sehen. Könnt ihr mir da vielleicht noch einen Tipp geben wie ich das ändern kann. Hab das in meinem Quellcode immer mit <div> eingebunden.
Hier mal der Quellcode von meiner Grafik. Wenn ihr den von der Seite wo ich die Grafen einbinde auch noch braucht, einfach bescheid geben.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Unser Balkendiagramm</title>
<style type="text/css">
#bardemo {
position:relative;
padding:0;
border: 1px solid #000;
font-family:verdana;
width:900px;
height:150px;
background: #fff;
margin:auto
}
#bardemo div.title {
padding:0;
position:relative;
font:14px;
font-weight:bold;
top:5px;
text-align:center;
line-height:15px;
}
#bardemo div.axis {
padding:0;
position:absolute;
top:30px;
left:400px;
width:470px;
height:80px;
border-bottom:1px solid black;
border-left:1px solid black;
}
#bardemo div.axis2 {
padding:0;
position:absolute;
top:30px;
left:135px;
width:470px;
height:80px;
border-bottom:1px solid black;
}
#bardemo div.bar {
position:absolute;
left:0;
height:40px;
padding:10px 0px 0 0;
text-align:right;
font-size:11px;
color: #000;
font-weight:bold;
}
#bardemo div.bar_1 {
top:15px;
width:0px;
background:#999;
vertical-align:central;
}
#bardemo div.bar_2 {
top:15px;
width:0px;
left: <?php echo $abc= 4* $maxn;; ?>px;
background:#F60;
background-position:0;
color:#000;
vertical-align:central;
}
#bardemo div.bar_3 {
top:15px;
width:0px;
background:#060;
background-position:0;
color:#000;
vertical-align:central;
}
#bardemo div.bar_4 {
top:15px;
width:0px;
left:<?php echo $abc= 4* $maxn;; ?>px;
background:#999;
background-position:0;
text-align:left;
vertical-align:central;
}
#bardemo div.labels {
padding:0;
position:absolute;
top:30px;
left:10px;
width:100px;
height:150px;
line-height:30px;
}
#bardemo div.label {
position:absolute;
left:-8px;
height:30px;
padding:0;
font-size:9px;
}
#bardemo div.label_1 {
top:15px;
color:#060;
}
#bardemo div.label_2 {
top:60px;
color:#F60;
}
#bardemo div.label_3 {
top:15px;
color:#0c0;
}
#bardemo div.label_4 {
top:60px;
color:#00c;
}
#bardemo div.unit {
padding:0;
position:absolute;
top:120px;
left:250px;
width:400px;
font-size:10px;
text-align:center;
font-weight:bold;
}
</style>
</head>
<body onload="javascript:show_bars();">
<div id="bardemo">
<div class="title"><?php echo $bewertung; ?></div>
<div class="axis">
<div id="bardemo_bar1" class="bar bar_1"></div>
<div id="bardemo_bar2" class="bar bar_2"></div>
<div id="bardemo_bar3" class="bar bar_3"></div>
<div id="bardemo_bar4" class="bar bar_4"></div>
</div>
<div class="axis2">
<div id="bardemo_bar1" class="bar bar_1"></div>
<div id="bardemo_bar2" class="bar bar_2"></div>
<div id="bardemo_bar3" class="bar bar_3"></div>
<div id="bardemo_bar4" class="bar bar_4"></div>
</div>
<div class="labels">
<div class="label label_1">positiv (<?php echo "$positiv von $maxp "; ?>)</div>
<div class="label label_2">negativ (<?php echo "$negativ von $maxn "; ?>)</div>
</div>
<div class="unit">erreichte Punkte</div>
</div>
<script type="text/javascript">
/* Balkenobjekte */
var bardemo_bars = new Array(
document.getElementById('bardemo_bar1'),
document.getElementById('bardemo_bar2'),
document.getElementById('bardemo_bar3'),
document.getElementById('bardemo_bar4')
);
/* Startwerte der Balken */
var bardemo_current = new Array(0,0,0,0);
/* Zielwerte der Balken */
var bardemo_target = new Array(<?php echo $maxp; ?>, <?php echo $asd = -1 * $maxn; ?>, <?php echo $positiv; ?>, <?php echo $qwe = -1 * ($maxn - $negativ); ?> );
/* Schrittweite */
var bardemo_step = 0.25;
/* Verzoegerung zwischen Schritten in ms */
var bardemo_time = 20;
function show\_bars() {
/\* Schalter: Sind wir fertig? \*/
var done = true;
/\* Balken durchlaufen \*/
for (var i = 0; i < bardemo\_bars.length; i++) {
if(bardemo\_target[i] > -1){
if (bardemo\_current[i] < bardemo\_target[i]) {
/\* Max. Laenge nicht erreicht \*/
/\* Balken ist noch nicht fertig \*/
done = false;
/\* Um Schrittweite erhoehen \*/
bardemo\_current[i] += bardemo\_step;
/\* DIV auf entsprechende Laenge setzen
1 Step = 1 Pixel \*/
bardemo\_bars[i].style.width = (bardemo\_current[i] / bardemo\_step) + 'px';
}
else {
/\* Max. Laenge erreicht \*/
/\* Label in Balken schreiben \*/
if(bardemo\_target[i] == <?php echo $asd; ?>){
bardemo\_bars[i].innerHTML = <?php echo $negativ; ?> + ' ';
}
else if(bardemo\_target[i] == <?php echo $qwe; ?>){
bardemo\_bars[i].innerHTML = ' ' + <?php echo $maxn; ?>;
}
else{
bardemo\_bars[i].innerHTML = bardemo\_target[i] + ' ';
}
}
}
}
/\* Wenn nicht fertig, dann show\_bars() in bardemo\_time ms
erneut ausfuehren \*/
if (!done) window.setTimeout("show\_bars()",bardemo\_time);
}
</script>
</body>
</html>
Matthias Apsel
Der Martin