How to create a 3D dynamic Chart in Canvas
This time I will bring you CanvasHow to make a 3D dynamic Chart chart, Canvas makes a 3D dynamic Chart chartWhat are the precautions, the following is a practical case, one Get up and take a look.
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 indeed easy to use, but sometimes we cannot call other plug-ins. At this time, you have to write these beautiful charts yourself, 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’s 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, and then set it 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 and a transparent one in the outer layer Node, a 3D text at the bottom shows 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 that the setting of the 'shape3d':cylinderModel style, first of all, shape3d propertiesspecifies the icon effect displayed as a 3D model. cylinderModel is a 3D model customized with HT. Please refer to HT for Web Modeling Manual:
cylinderModel = ht.Default.createCylinderModel(1000, 0, 1000, false, false, true, true);
Then set a dynamically changing attribute myHeight. In HT, the node.a method is reserved for users to store business data. We can add as many as we want here. Attributes.
The next thing we want to create is an external transparent node. The construction method of this node is basically the same as the internal node, but with a little more "transparent" style setting:
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 first Set 'shape3d.transparent' to true, and then set 'shape3d.opacity' transparency.
The last 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 draws one word composed of countless triangles, which takes up a lot of memory, so I adjusted the fineness of the curve of the graphic to a lower level, but it is still very clear. If If you can find a font with better performance, you can use it and let me know. We have not found a font that takes up less memory.
Finally, to dynamically change the column chart in the chart, we have to set animation and update the 3D font value 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 I can change the value of the variable at will, 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 realized~
I believe you will read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
H5 method of reading files and uploading to the server
How to add the right side of the select drop-down box Prompt icon
The above is the detailed content of How to create a 3D dynamic Chart in Canvas. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Convert VirtualBox fixed disk to dynamic disk and vice versa
Mar 25, 2024 am 09:36 AM
When creating a virtual machine, you will be asked to select a disk type, you can select fixed disk or dynamic disk. What if you choose fixed disks and later realize you need dynamic disks, or vice versa? Good! You can convert one to the other. In this post, we will see how to convert VirtualBox fixed disk to dynamic disk and vice versa. A dynamic disk is a virtual hard disk that initially has a small size and grows in size as you store data in the virtual machine. Dynamic disks are very efficient at saving storage space because they only take up as much host storage space as needed. However, as disk capacity expands, your computer's performance may be slightly affected. Fixed disks and dynamic disks are commonly used in virtual machines
How to convert dynamic disk to basic disk on Windows 11
Sep 23, 2023 pm 11:33 PM
If you want to convert a dynamic disk to a basic disk in Windows 11, you should create a backup first as the process will erase all data in it. Why should you convert dynamic disk to basic disk in Windows 11? According to Microsoft, dynamic disks have been deprecated from Windows and their use is no longer recommended. Additionally, Windows Home Edition does not support dynamic disks, so you will not be able to access these logical drives. If you want to combine more disks into a larger volume, it is recommended to use Basic Disks or Storage Spaces. In this article, we will show you how to convert dynamic disk to basic disk on Windows 11 How to convert dynamic disk to basic disk in Windows 11? In the beginning
How to create a dynamic image carousel using HTML, CSS and jQuery
Oct 25, 2023 am 10:09 AM
How to use HTML, CSS and jQuery to create a dynamic image carousel. In website design and development, image carousel is a frequently used function for displaying multiple images or advertising banners. Through the combination of HTML, CSS and jQuery, we can achieve a dynamic image carousel effect, adding vitality and appeal to the website. This article will introduce how to use HTML, CSS and jQuery to create a simple dynamic image carousel, and provide specific code examples. Step 1: Set up HTML junction
Learn the canvas framework and explain the commonly used canvas framework in detail
Jan 17, 2024 am 11:03 AM
Explore the Canvas framework: To understand what are the commonly used Canvas frameworks, specific code examples are required. Introduction: Canvas is a drawing API provided in HTML5, through which we can achieve rich graphics and animation effects. In order to improve the efficiency and convenience of drawing, many developers have developed different Canvas frameworks. This article will introduce some commonly used Canvas frameworks and provide specific code examples to help readers gain a deeper understanding of how to use these frameworks. 1. EaselJS framework Ea
What versions of html2canvas are there?
Aug 22, 2023 pm 05:58 PM
The versions of html2canvas include html2canvas v0.x, html2canvas v1.x, etc. Detailed introduction: 1. html2canvas v0.x, which is an early version of html2canvas. The latest stable version is v0.5.0-alpha1. It is a mature version that has been widely used and verified in many projects; 2. html2canvas v1.x, this is a new version of html2canvas.
uniapp implements how to use canvas to draw charts and animation effects
Oct 18, 2023 am 10:42 AM
How to use canvas to draw charts and animation effects in uniapp requires specific code examples 1. Introduction With the popularity of mobile devices, more and more applications need to display various charts and animation effects on the mobile terminal. As a cross-platform development framework based on Vue.js, uniapp provides the ability to use canvas to draw charts and animation effects. This article will introduce how uniapp uses canvas to achieve chart and animation effects, and give specific code examples. 2. canvas
Parse dynamic SQL tags in MyBatis: select tag
Feb 24, 2024 pm 12:15 PM
Dynamic SQL is one of the very important functions in the MyBatis framework. It can dynamically splice and process SQL statements according to different conditions to achieve flexible SQL operations. Among them, the selection tag is a key tag in dynamic SQL, which is mainly used to implement conditional selection logic. This article will explore the use of selection tags in MyBatis and provide specific code examples for demonstration. 1. Basic syntax of selection tags There are two main forms of selection tags in MyBatis:
How to draw dynamic and interactive geographic charts with Python
Sep 28, 2023 pm 09:37 PM
How to draw dynamic and interactive geographic charts with Python Introduction: In data visualization, geographic charts are a common and powerful tool that can help us better understand spatial distribution patterns and trends in data sets. As a general-purpose programming language, Python has powerful data processing and visualization capabilities, and can also be used to draw dynamic and interactive geographical charts. This article will introduce how to use Python to draw dynamic and interactive geographical charts, and provide specific code examples. 1. Preparation for using Pytho
