Vissza a főoldalra Vissza egy témakört

GoJS minimalis diagram bemutató példa

Első GoJS bemutató példa, egyszerű szöveges diagram.

A div szakasz területére mozgatjuk az egérkurzort, akkor görgetéssel elmozgathatjuk a szövegeket.
Ha a kiválasztott szövegen lenyomjuk az egér balos billentyűt, akkor tetszőleges helyre mozgathatjuk, azt.

Első GoJS bemutató leírása.

A html5 fájlunk tartalma.

<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>go01 teszt</title>
<link href="saját-stílus-fájlod.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.17/go-debug.js"></script>
</head>
<body>
<div id="container">
<h1>Gojs egyszerű diagram teszt.</h1>

<div id="DiagramDiv" style="width:400px; height:200px; background-color: #DAE4E4;"></div>
<script src="go01js.js"></script>

</div> </body> </html>

A go01js.js fájlunk tartalma.

var $ = go.GraphObject.make;
var Diagram = $(go.Diagram, "DiagramDiv",
                                {"undoManager.isEnabled": true }
                          );

var Model = $(go.Model);
Model.nodeDataArray = [
  { key: "Alpha" },
  { key: "Beta" },
  { key: "Gamma" },
  { key: "Delta" }
];
Diagram.model = Model;




Második GoJS bemutató példa.

Egyszerű kép és szöveges diagram.

Megjegyzés:
A diagramhoz szükséges képeket, dia1; dia2; dia3; mindenki előre készítse el.
Ha nincs kép, akkor csak egy piros négyszög jelenik meg.


Második GoJS bemutató leírása.

A html5 fájlunk tartalma.

<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>go01 teszt</title>
<link href="saját-stílus-fájlod.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.17/go-debug.js"></script>
</head>
<body>
<div id="container">
<h1>Gojs kép és szöveg teszt.</h1>

<div id="DiagramDiv02" style="width:600px; height:400px; background-color: yellow;"></div>
<script src="go012js.js"></script>

</div>
</body>
</html>



A go012js.js fájlunk tartalma.

var $ = go.GraphObject.make;
                            // Engedélyezzük a Ctrl-Z visszavonását, és a Ctrl-Y újraindításához.
var Diagram02 = $(go.Diagram, "DiagramDiv02", { "undoManager.isEnabled": true } );

 // Határozzunk meg, egy egyszerű csomópont-sablont, a diagram alakzatokhoz.
Diagram02.nodeTemplate =
   $(go.Node, "Horizontal", { background: "#44CCFF" },	  // Minden csomópont, világoskék háttérrel fog rendelkezni.
                                 // A képeknek go.Picture, általában meghatározott szélességgel és magassággal kell rendelkezniük. 
                                 // Most a példánkban, a képek piros háttérrel fognak rendelkezni, 50x50-es területen. 
                                 // Háttérszín csak akkor látható, ha nincs forrás / source, vagy ha a kép részben átlátszó.
                                 // Ha a kép nagyobb, akkor is 50x50 lesz látható, ha kisebb, akkor a háttérszín is látható
        $(go.Picture, { margin: 10, width: 50, height: 50, background: "red" },
                                           // A Picture.source (kép.forrás) a modelladatok "forrás" attribútumához kötött adatok.
             new go.Binding("source")),                 // go.Binding = Kapcsolat, kötés, kötődés.
		 
        $(go.TextBlock, "Default Text",               // A TextBlock szövegének, alapértelmezett kezdeti értékének meghatározása.
                                                                        
            { margin: 12, stroke: "white", font: "bold 16px sans-serif" },   // Stílusok a szöveghez, fehér szín és egy betűtípus:
                                           // A TextBlock.text a modelladatok, egyedi "name/név" attribútumához kötött adatok.
            new go.Binding("text", "name"))
   );

        // Minden csomópont adatobjektum, rendelkezik a szükséges tulajdonságokkal;
        // Ezért az alkalmazáshoz, hozzáadjuk a "név name" és a "forrás source" tulajdonságokat. 
		
var diagramModelek = $(go.Model);
diagramModelek.nodeDataArray =
[
  { name: "1.Képhez szöveg", source: "dia1.png" },     // Itt határozzuk meg, kép elérésí útvonalát.
  { name: "2.Képhez szöveg", source: "dia2.png" },     // Lehet más kiterjesztésű is, például: jpg
  { name: "3.Képhez szöveg", source: "dia3.png" },
  { /* Üres csomópontadatok.*/  }   // Nem határozunk meg adatokat, akkor az alapértelmezett Default meghatározás lép érvénybe. 
];
Diagram02.model = diagramModelek;