• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Diagramm Darstellen

MasteR ChieF

MasteR ChieF

Mitglied
Hallo Community

Ich habe meiner Ansicht nach ein etwas kompliziertes Problem =)

Ich habe 2 Arrays (Javascricpt). Im ersten Array Steht ein Text und eine Position.

Zb.: {"Textangabe;x,y", "nochEinText;x,y"}

Jede Position in diesem Array repräsentiert eine Box (zb.: div), welche auf dem Bildschirm dargestellt werden müssen (anhand der Positionsangaben).

Im zweiten Array stehen Verbindungsinformationen. Sprich: Es steht drin, welche Box (vom ersten Array) mit welcher anderen Box in Verbindung steht. Der Inhalt dieses Array beschränkt sich auf die Indexe des ersten Arrays.

Zb.: {"0,1"} -> Verbindung der beiden Boxen aus dem Beispielarray oben.

Schlussendlich soll sowas wie ein zb.: Organigramm entstehen, oder ein Datenbankschema. Nur soll es halt dynamisch anhand des Arrays angezeigt werden.

Wie kann ich das realisieren?
Das mit dem Platzieren der Boxen würde ich sicherlich hinbringen. Aber das Verbinden (mit Linien) habe ich keine Ahnung.

Danke für eure Hilfe
Gruss
MasterChief
 
Hallo ich bins nochmal =)

War doch nicht so kompliziert wie ich gedacht habe xDD
Google hat weitergeholfen nach 2 h Suche sollte man das ach verlangen dürfen :D

Lösung um eine Linie zu zeichnen:

Code: 
function DrawLine()
    {
        var Ax = 100;
        var Ay = 100;
        var Bx = 200;
        var By = 200;
        
        var out = "";
        var lineLength = Math.sqrt( (Ax-Bx)*(Ax-Bx)+(Ay-By)*(Ay-By) );
        alert(lineLength);
        for( var i=0; i<lineLength; i++ )
        {
            out += "<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 += out;
    }
 
Ja du siehst das richtig =) das sind wirklich eine Menge Div-Tags...

Danke für deinen Link, nur bringt der mir was?
Habe mich mal auf der Seite ein wenig umgeschaut. Aber so simple Linien zeichnen habe ich nicht gefunden. (Javascript ist nicht meine Stärke).
Brauchst du diese Bibliothek?
 
Na ja, damit kannst du zum Beispiel sowas machen:

(Demo kurzzeitig hier: tmp/html.de/raphael)

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>
        <script type="text/javascript" src="./raphael-min.js"></script>

        <script type="text/javascript">

window.onload = function () {

    createBox = function (paper, label) {
        var rect   = paper.rect(0, 0, 80, 20),
            rectbb = rect.getBBox(),
            text   = paper.text(0, 0, label),
            group  = null;

        rect.attr({fill: '#eee'});
        text.translate(rectbb.width / 2, rectbb.height / 2);

        group = paper.set();
        group.push(rect);
        group.push(text);
        
        group.mouseover(function () {
            rect.attr({fill: '#fcc'});
        });

        group.mouseout(function () {
            rect.attr({fill: '#eee'});
        });

        group.attr({cursor: 'pointer'});

        return group;
    };

    connect = function(paper, obj1, obj2) {
        var obj1bb    = obj1.getBBox(),
            obj2bb    = obj2.getBBox(),
            path      = '',
            connector = null;

        path = "M " + (obj1bb.x + obj1bb.width / 2) + " "
               + (obj1bb.y + obj1bb.height / 2)
               + "L " + (obj2bb.x + obj2bb.width / 2) + " "
               + (obj2bb.y + obj2bb.height / 2);

        connector = paper.path(path);
        connector.toBack();
        return connector;
    };
    
    var paper = Raphael(0, 0, 400, 400),
        box1  = createBox(paper, "Hallo Welt!"),
        box2  = createBox(paper, "Foobar"),
        box3  = createBox(paper, "Dumdidum");

    box1.translate(Math.random() * 350, Math.random() * 380);
    box2.translate(Math.random() * 350, Math.random() * 380);
    box3.translate(Math.random() * 350, Math.random() * 380);
    
    connect(paper, box1, box2);
    connect(paper, box2, box3);
};

        </script>
    </head>

    <body>


    </body>

</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben