JSON and ECharts charts based on HTML5 are displayed in the same interface

Suddenly there is an idea, if you can put some different knowledge points on the same interface and put it in a box, so if I want to look at anything, it can be displayed directly, and this box must be able to open it. Essence I used HT to realize my idea, with more than a hundred lines of code, so few code can achieve this effect. I think it is still cattle.

Let's take a look at the renderings:

The most basic of this example is the outermost box, so let's take a look at how to achieve it:

 var box = new ht.csgbox (); datamodel.add (box);

Using HT can easily implement this box. Many basic graphical types are encapsulated in HT. The ht.node we often use is also one of them, so that we can write the same code repeatedly to complete the basic implementation.

The encapsulated basic map used in this example is HT.CSGBOX, a box model, you can refer to the HT FOR Web modeling manual. We can see in the manual. If you want to set some special features yourself, you only need to operate ht.style (HT for Web style manual).

If you want to add a sticker on one side of the box, only what I can think of is ht.default.setImage function encapsulated.

The method I implemented here is to refer to HT's Editor to operate, re -declare a GraphView component and a DataModel data model, and then call JSON through ht.default.xhrload method. In the method JSON format, and then the deeflier shows the content in JSON as a visual interface, then sets the animation, and then immediately refreshes the interface of this JSON. Otherwise, even if the animation is set, the picture will not change.

 ht.Default.xhrload ('Displays/Demo/Pump.json', Function (Text) {const json = ht.default.parse (text); Pumpdm.Deserialize (JSON); VAR CURENT Rotation = 0; var lasttime = new date () .gettime (); SetInterval (Function () {var time = new date (). Gettime (); VAR DELTAME = TIME -LASTTIME; * 0.3; LastTime = Time; Pumpdm .getdatabytag ('FAN1'). Setrotation (CurrenTrotation); pumpdm.getdatabytag ('FAN2'). You can also refresh G3D, but partial Refresh more pumpgv.validateImpl ();}, 10);}, 10);

At this time I can't add PumpGV and G3D to the bottom DIV, and my intention is to add PumpGV to the side of the CSGBOX in G3D. It must be larger than the area of ​​the picture drawn by JSON, otherwise it is not complete. If you want to see the impact of this wide height on the display, you can change it yourself.

 pumpgv.getWidth = Function () {Return 600;} pumpgv.getHeight = Function () {Return 600;} pumpgv.getcanvas (). Dynamic = TRUE; VAS can dynamically display

The display of the ECharts chart is also very basic. Just add Canvas.Dynamic = TRUE and refresh GV in real time.

In the end, you only need to pass these two returned Canvas into ht.default.setImage::

 ht.Default.Setimage ('Echart', Charts (Option)); ht.default.setImage ('Pump', Pumpgv.getcanvas ());

The HT.Default.DrawImage function generates a new diagram actually draws pictures on Canvas, so we only need to pass the Canvas that we have drawn to ht.default.Setimage to generate pictures.

One thing needs to be improved. We can see the line segments, graphics, and text around the box, because when we set the font, we have a transparency at the same time. At this time, we cannot control the style. Generally, when there is transparency, we need to set all.transparent to true.

We can set the transparent: true that needs to be displayed. Look at the renderings after completion:

The above is the HTML5 -based WebGL implementation of JSON and ECharts charts introduced to everyone. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!