I found that there are a lot of charts used in industrial SCADA or telecommunications network management. Although most people use echarts for chart production, it is really easy to use. However, sometimes we cannot call other plug-ins. At this time, we have to write our own These are beautiful charts, but charts cannot be made beautiful easily. . . I saw a chart for sale on a website and thought it looked pretty good, so I used HT for Web 3D to make a small example. It was quite simple and pretty, haha~
The dynamic rendering is as follows:
This example is really easy to implement with HT. First create a basic dm data model in HT, then add the data model to the g3d 3d component, then set the perspective 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 bars. My idea is this: there is a node in the inner layer, a transparent node in the outer layer, and a 3D text at the bottom to display the current percentage.
The inner node is very easy. I directly use the ht.Node encapsulated by HT to create a new node object, and then set the style of the node node through 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);What needs to be explained is the setting of 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. Please refer to the HT for Web Modeling Manual:
cylinderModel = ht.Default.createCylinderModel(1000, 0, 1000, false, false, true, true);
Then a dynamically changing attribute myHeight is set. In HT, the node.a method is reserved for users to store business data. We can add any number of attributes here.
Next we need to create an external transparent node. This node is basically constructed in the same way as the internal node, except that it has 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);To set 'shape3d.transparent' to true first, then set 'shape3d.opacity' transparency.
Finally, there is 3D text. To render 3D text, you need a typeface font in json format, and then use ht.Default.loadFontFace to load the json format font into the memory. For details, please refer to 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 drawn in a way that one word is composed of countless triangles, which takes up a lot of memory, so I adjusted the fineness of the graphic curve to a lower level, but it is still very clear. If you can find a better performance Good fonts can be used and let me know. We have not found any fonts that use small memory.
Finally, to dynamically change the bar graph in the chart, we have to set animations and update the 3D font values synchronously:
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 the value of the variable can be changed arbitrarily, so that the effect of dynamic binding can be achieved.
If you still don’t understand, you can leave a message, or go directly to our official website to view the manual HT for Web. There are more effects you can’t think of that can be quickly achieved~
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.