Example of a 3D Dynamic Chart Based on HTML5 Canvas, html5chart

Example of a 3D Dynamic Chart Based on HTML5 Canvas, html5chart

I found that there are a lot of charts used in industrial SCADA or telecom network management. Although most people use echarts in chart production, it is really easy to use, but sometimes we cannot call other plug-ins, at this time, you have to write these beautiful charts by yourself. However, the charts cannot be beautiful... I saw a chart being sold on a website. It looks pretty good. I used HT for Web 3D for a small example. It's quite simple and pretty nice. Haha ~

The dynamics are as follows:

It is really easy to use HT in this example. First, create the most basic dm Data Model in HT, and then add the data model to the g3d 3d component, set the Angle of View in 3d and add the 3d component to the body element:

dm = new ht.DataModel();g3d = new ht.graph3d.Graph3dView(dm);g3d.setEye(0, 185, 300);g3d.addToDOM();g3d.getView().style.background = '#000';

The next step is to create these five chart charts. My idea is this: there is a node in the layer, a transparent node in the outer layer, and a 3d text at the bottom shows the current percentage.

The nodes in the layer are very easy. I directly used the HT. Node encapsulated by ht to create a new node object, and then set the node style using the Node. s method:

var node = new ht.Node();node.s({    'shape3d': cylinderModel,    'shape3d.color': color,    '3d.movable': false});node.a({    'myHeight': s3[1],});node.p3([p3[0], s3[1]/2, p3[2]]);node.s3(s3);dm.add(node);

It should be noted that, for setting the 'shape3d ': cylinderModel style, first, the shape3d attribute specifies the icon effect displayed as a 3d model. cylinderModel is a 3d model customized with HT, refer to the HT for Web modeling manual:

cylinderModel = ht.Default.createCylinderModel(1000, 0, 1000, false, false, true, true);

Then we set a dynamically changed property myHeight. in HT, the node. a method is reserved for users to store business data. We can add any multiple attributes here.

Next, we will create an external transparent node. The construction method of this node is basically the same as that of the internal node, that is, a little more "Transparent" style settings:

var cNode = new ht.Node();cNode.s({    'shape3d': cylinderModel,    'shape3d.transparent': true,    'shape3d.opacity': 0.2,        'label.color': '#fff',    '3d.movable': false});cNode.p3([p3[0], 50, p3[2]]);cNode.s3(20, 100, 20);dm.add(cNode);

Set 'shape3d. transparent' to true, and then set 'shape3d. opacity 'to opacity.

The last step is 3d text. To present 3d text, you need a typeface font in json format, and then use ht. default. loadFontFace: loads the font in json format to the memory. for more information, see the HT for Web 3D manual:

ht.Default.loadFontFace('./wenquanyi.json', function(){    //......    var text = new ht.Node();    text.s3([5, 5, 5]);    text.p3(cNode.p3()[0]-5, -10, 0);    dm.add(text);    text.s({        'shape3d' : 'text',    'shape3d.text': node.a('myHeight')+'%',    'shape3d.text.curveSegments': 1,    '3d.movable': false    });});

Because the typeface font we use is a word made up of countless triangles, it will occupy a lot of memory, so I adjusted the precision of the curve to a lower level, but it is still very clear. If you can find a font with better performance, you can use it and tell me that we have not found a font with a small memory usage.

Finally, to dynamically change the bar chart in the chart, we need to set an animation and update the value of the 3d font simultaneously:

setInterval(function(){    if(node.a('myHeight') < 100){        node.a('myHeight', (node.getAttr('myHeight')+1));    node.s3(20, node.a('myHeight'), 20);    node.p3(p3[0], node.a('myHeight')/2, p3[2]);    }else{        node.a('myHeight', 0);    node.s3([20, 0, 20]);    node.p3([p3[0], 0, p3[2]]);    }    if (text) text.s('shape3d.text', node.a('myHeight')+'%');}, 100);

Here, my custom attribute "myHeight" plays a decisive role. I use this attribute to store variables and can change the value of variables at will, in this way, the dynamic binding effect can be achieved.

You can leave a message if you do not understand it, or go to our official website to view the manual HT for Web. More unexpected results can be achieved quickly ~

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.