Descubrí que se utilizan muchos gráficos en SCADA industrial o en la gestión de redes de telecomunicaciones. Aunque la mayoría de la gente usa echarts para la producción de gráficos, es realmente fácil de usar. Sin embargo, a veces no podemos llamar a otros complementos. Tenemos que escribir los nuestros. Estos son gráficos hermosos, pero los gráficos no se pueden hacer hermosos fácilmente. . . Vi un gráfico a la venta en un sitio web y pensé que se veía bastante bien, así que usé HT para Web 3D para hacer un pequeño ejemplo. Fue bastante simple y bonito, jaja~.
La representación dinámica es la siguiente:
Este ejemplo es realmente fácil de implementar con HT. Primero cree un modelo de datos dm básico en HT, luego agregue el modelo de datos al componente 3d de g3d, luego establezca la perspectiva en 3d y agregue el componente 3d al elemento del cuerpo:
dm = nuevo ht.DataModel();g3d = nuevo ht.graph3d.Graph3dView(dm);g3d.setEye(0, 185, 300);g3d.addToDOM();g3d.getView().style.background = '# 000';
El siguiente paso es crear estas cinco barras del gráfico. Mi idea es la siguiente: hay un nodo en la capa interior, un nodo transparente en la capa exterior y un texto 3D en la parte inferior para mostrar el porcentaje actual.
El nodo interno es muy simple. Utilizo directamente el ht.Node encapsulado por HT para crear un nuevo objeto de nodo y luego configuro el estilo del nodo a través del método node.s:
var nodo = new ht.Node();node.s({ 'shape3d': cilindroModel, 'shape3d.color': color, '3d.movable': false});node.a({ 'myHeight': s3[ 1],});nodo.p3([p3[0], s3[1]/2, p3[2]]);nodo.s3(s3);dm.add(nodo);Lo que hay que explicar es la configuración del estilo 'shape3d':cylinderModel. Primero, el atributo shape3d especifica el efecto del icono que se muestra como un modelo 3D. cilindroModel es un modelo 3D personalizado con HT. :
cilindroModel = ht.Default.createCylinderModel(1000, 0, 1000, falso, falso, verdadero, verdadero);
Luego se establece un atributo myHeight que cambia dinámicamente. En HT, el método node.a está reservado para que los usuarios almacenen datos comerciales. Aquí podemos agregar cualquier cantidad de atributos.
A continuación, necesitamos crear un nodo transparente externo. Este nodo se construye básicamente de la misma manera que el nodo interno, excepto que tiene una configuración de estilo un poco más transparente:
var cNode = new ht.Node();cNode.s({ 'shape3d': cilindroModel, 'shape3d.transparent': verdadero, 'shape3d.opacity': 0.2, 'label.color': '#fff', '3d .movable': falso});cNode.p3([p3[0], 50, p3[2]]);cNode.s3(20, 100, 20);dm.add(cNode);Para establecer 'shape3d.transparent' en verdadero primero, luego configure la transparencia de 'shape3d.opacity'.
Finalmente, está el texto 3D. Para representar texto 3D, necesita una fuente tipográfica en formato json y luego use ht.Default.loadFontFace para cargar la fuente en formato json en la memoria. Para obtener más información, consulte HT para Web 3D. manual:
ht.Default.loadFontFace('./wenquanyi.json', function(){ //...... var texto = new ht.Node(); text.s3([5, 5, 5]); texto .p3(cNode.p3()[0]-5, -10, 0); dm.add(texto);s({ 'shape3d': 'texto', 'shape3d.text': node.a('myHeight')+'%', 'shape3d.text.curveSegments': 1, '3d.movable': false });});Debido a que la fuente tipográfica que utilizamos está dibujada de manera que una palabra se compone de innumerables triángulos, lo que ocupa mucha memoria, ajusté la finura de la curva gráfica a un nivel inferior, pero aún así es muy claro. puede encontrar un mejor rendimiento. Se pueden usar buenas fuentes y hágamelo saber. No hemos encontrado ninguna fuente que use poca memoria.
Finalmente, para cambiar dinámicamente el gráfico de barras en el gráfico, debemos configurar animaciones y actualizar los valores de fuente 3D de forma sincrónica:
setInterval(function(){ if(node.a('myHeight') < 100){ node.a('myHeight', (node.getAttr('myHeight')+1)); node.s3(20, node. a('miAltura'), 20); nodo.p3(p3[0], nodo.a('miAltura')/2, p3[2]); node.a('myHeight', 0); node.s3([20, 0, 20]); node.p3([p3[0], 0, p3[2]]); s('shape3d.text', nodo.a('myHeight')+'%');}, 100);Aquí, mi atributo personalizado myHeight juega un papel decisivo. Utilizo este atributo para almacenar variables y el valor de la variable se puede cambiar arbitrariamente para lograr el efecto de enlace dinámico.
Si aún no lo comprende, puede dejar un mensaje o ir directamente a nuestro sitio web oficial para ver el manual HT para Web. Hay más efectos que no se le ocurren y que se pueden lograr rápidamente ~.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.