So verwenden Sie H5 WebGL, um JSON- und Echarts-Diagramme in derselben Schnittstelle zu erstellen

Dieses Mal zeige ich Ihnen, wie Sie mit H5s WebGL JSON- und Echarts-Diagramme auf derselben Schnittstelle erstellen. Welche Vorsichtsmaßnahmen gelten für die Verwendung von H5s WebGL zur Erstellung von JSON- und Echarts-Diagrammen auf derselben Schnittstelle? Das Folgende ist ein praktischer Fall. Werfen wir einen Blick darauf.

Plötzlich hatte ich eine Idee, wenn ich einige Wissenspunkte, die auf unterschiedliche Weise verwendet werden, auf derselben Oberfläche platzieren und in eine Box packen könnte. Wenn ich dann etwas sehen möchte, kann es direkt angezeigt werden. und Die Box muss geöffnet werden können. Ich habe HT verwendet, um meine Idee zu verwirklichen. Mit mehr als 100 Zeilen Code finde ich es großartig, dass eine so kleine Menge Code diesen Effekt erzielen kann.

Das Grundlegendste an diesem Beispiel ist die äußerste Box, also schauen wir uns zunächst an, wie man sie implementiert:

var box = new ht.CSGBox();
dataModel.add(box);

Diese Box kann einfach mit HT implementiert werden Es kapselt viele grundlegende primitive Typen, und ht.Node, den wir häufig verwenden, ist ebenfalls einer davon, sodass wir die grundlegende Implementierung abschließen können, ohne denselben Code wiederholt schreiben zu müssen.

Das in diesem Beispiel verwendete gekapselte Grundelement ist ht.CSGBox, ein Box-Modell. Sie können im Handbuch „In CSGBox“ nachsehen , wir können nur alle Aspekte der Box bedienen. Wenn Sie einige Sonderfunktionen selbst einstellen möchten, müssen Sie nur ht.Style (HT für Web Style Manual) bedienen.

Um einer Fläche der Box eine Textur hinzuzufügen, fällt mir nur die in HT gekapselte Funktion ht.Default.setImage ein.

Die Methode, die ich hier implementiert habe, besteht darin, mit Bezug auf den Editor von HT zu arbeiten, eine Graphview-Komponente und ein Datenmodell-Datenmodell neu zu deklarieren und dann JSON über die ht.Default.xhrLoad-Methode aufzurufen, wobei ht.Default in verwendet wird Die Methode .parse konvertiert Text in das JSON-Format, deserialisiert ihn dann, um den Inhalt in JSON in einer visuellen Schnittstelle anzuzeigen, legt dann Animation fest und aktualisiert dann sofort die Schnittstelle mit diesem JSON, andernfalls selbst wenn die Animation vorhanden ist eingestellt ist, ändert sich das Bild nicht.

ht.Default.xhrLoad('displays/demo/pump.json', function(text){
    const json = ht.Default.parse(text);
    pumpDM.deserialize(json);
    var currentRotation = 0;
    var lastTime = new Date().getTime();
    setInterval(function(){
        var time = new Date().getTime();
        var deltaTime = time - lastTime;
        currentRotation += deltaTime * Math.PI / 180 * 0.3;
        lastTime = time;
        pumpDM.getDataByTag('fan1').setRotation(currentRotation);
        pumpDM.getDataByTag('fan2').setRotation(currentRotation);
        box.iv();
        // g3d.iv();这边也可以刷新g3d，但是局部刷新更省
        pumpGV.validateImpl();
    }, 10);
}, 10);

Derzeit kann ich pumpGV und g3d nicht zum zugrunde liegenden div hinzufügen, und ich beabsichtige, pumpGV auf einer Seite der CSGBox in g3d hinzuzufügen. Damit pumpGV angezeigt werden kann, muss es also angezeigt werden eingestellt werden Die Breite und Höhe von pumpGV, und diese Breite und Höhe müssen größer sein als der Bereich, den das von meinem JSON gezeichnete Bild einnimmt, sonst ist die Anzeige unvollständig. Wenn Sie sehen möchten, wie sich diese Breite und Höhe auf das Display auswirkt, können Sie es selbst ändern und Spaß haben.

pumpGV.getWidth = function() { return 600;}
pumpGV.getHeight = function(){ return 600;}
pumpGV.getCanvas().dynamic = true;//设置这个是为了让canvas能动态显示

Die Anzeige von Echarts-Diagrammen ist ebenfalls sehr einfach. Fügen Sie einfach canvas.dynamic = true hinzu und aktualisieren Sie gv in Echtzeit.

Schließlich müssen Sie nur noch diese beiden zurückgegebenen Leinwände an ht.Default.setImage übergeben:

ht.Default.setImage('echart', charts(option));
ht.Default.setImage('pump', pumpGV.getCanvas());

Die Funktion ht.Default.drawImage generiert tatsächlich ein neues Bild. Es zeichnet auf der Leinwand Daher müssen wir nur die von uns gezeichnete Leinwand an ht.Default.setImage übergeben, um das Bild zu generieren.

Es gibt eine Sache, die verbessert werden muss. Wir können sehen, dass die Liniensegmente, Grafiken und der Text auf dem Feld einen Kreis aus gezackten Kanten haben, denn wenn wir die Schriftart festlegen, legen wir auch die Transparenz fest Der Stil „ wird deaktiviert. Zu diesem Zeitpunkt können wir den Stil nicht steuern. Wenn Transparenz vorhanden ist, müssen wir im Allgemeinen „all.transparent“ auf „true“ setzen.

Ich glaube, Sie haben es nach dem Lesen gemeistert Weitere spannende Informationen zu diesen Fällen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie das Titelattribut von HTML, um Text beim Bewegen der Maus anzuzeigen

Verwendung das a-Tag So lösen Sie die Inkonsistenz zwischen dem href-Attribut und dem onclick-Ereignis

der Cursorgröße im Eingabeeingabefeld

Das obige ist der detaillierte Inhalt vonSo verwenden Sie H5 WebGL, um JSON- und Echarts-Diagramme in derselben Schnittstelle zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!