산업용 SCADA나 통신 네트워크 관리에 사용되는 차트가 많다는 것을 알게 되었는데, 대부분의 사람들이 차트 제작에 echart를 사용하지만, 이 때 다른 플러그인을 호출할 수 없는 경우가 있습니다. 우리 스스로 작성해야 합니다. 이것은 아름다운 차트이지만 차트를 쉽게 아름답게 만들 수는 없습니다. . . 웹사이트에서 판매하는 차트를 보고 꽤 괜찮다고 생각해서 HT for Web 3D를 이용해서 아주 간단하고 예쁜 예제를 만들어 봤습니다.
동적 렌더링은 다음과 같습니다.
이 예는 HT로 구현하기가 정말 쉽습니다. 먼저 HT에서 기본 dm 데이터 모델을 만든 다음 데이터 모델을 g3d 3d 구성 요소에 추가한 다음 3d에서 관점을 설정하고 3d 구성 요소를 body 요소에 추가합니다.
dm = 새로운 ht.DataModel();g3d = 새로운 ht.graph3d.Graph3dView(dm);g3d.setEye(0, 185, 300);g3d.addToDOM();g3d.getView().style.Background = '# 000';
다음 단계는 이 5개의 차트 막대를 만드는 것입니다. 내 생각은 다음과 같습니다. 내부 레이어에는 노드가 있고 외부 레이어에는 투명 노드가 있으며 하단에는 현재 백분율을 표시하는 3D 텍스트가 있습니다.
내부 노드는 매우 쉽습니다. HT로 캡슐화된 ht.Node를 직접 사용하여 새 노드 객체를 만든 다음 node.s 메서드를 통해 노드 노드의 스타일을 설정합니다.
var node = new ht.Node();node.s({ 'shape3d': 실린더 모델, '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(노드);설명해야 할 것은 'shape3d':cylinderModel 스타일의 설정입니다. 먼저, shape3d 속성은 3D 모델로 표시되는 아이콘 효과를 지정합니다. 실린더 모델은 HT for Web Modeling Manual을 참조하세요. :
실린더 모델 = ht.Default.createCylinderModel(1000, 0, 1000, false, false, true, true);
그런 다음 동적으로 변경되는 myHeight 속성이 설정됩니다. node.a 메소드는 사용자가 비즈니스 데이터를 저장하도록 예약되어 있습니다.
다음으로 외부 투명 노드를 생성해야 합니다. 이 노드는 좀 더 투명한 스타일 설정이 있다는 점을 제외하면 기본적으로 내부 노드와 동일한 방식으로 구성됩니다.
var cNode = new ht.Node();cNode.s({ 'shape3d': 실린더 모델, '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);먼저 'shape3d.transparent'를 true로 설정하려면 'shape3d.opacity' 투명도를 설정하세요.
마지막으로 3D 텍스트를 렌더링하려면 json 형식의 서체 글꼴이 필요하며, ht.Default.loadFontFace를 사용하여 json 형식 글꼴을 메모리에 로드합니다. 자세한 내용은 HT for Web 3D를 참조하세요. 수동:
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' : '텍스트', 'shape3d.text': node.a('myHeight')+'%', 'shape3d.text.curveSegments': 1, '3d.movable': false });});저희가 사용하는 서체 폰트는 한 단어가 무수히 많은 삼각형으로 구성되어 있는 방식으로 그려져 있어서 메모리를 많이 차지하기 때문에 그래픽 곡선의 세밀함을 낮게 조정했지만 여전히 매우 선명합니다. 더 나은 성능을 찾을 수 있습니다. 좋은 글꼴을 사용할 수 있으며 작은 메모리를 사용하는 글꼴을 찾지 못했습니다.
마지막으로 차트의 막대 그래프를 동적으로 변경하려면 애니메이션을 설정하고 3D 글꼴 값을 동기적으로 업데이트해야 합니다.
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]); node.a('myHeight', 0); node.s3([20, 0, 20]); node.p3([p3[0], 0, p3[2]]); s('shape3d.text', node.a('myHeight')+'%');}, 100);여기서는 사용자 정의 속성 myHeight가 결정적인 역할을 합니다. 이 속성을 사용하여 변수를 저장하고 변수 값을 임의로 변경할 수 있으므로 동적 바인딩 효과를 얻을 수 있습니다.
그래도 이해가 안 되신다면 메시지를 남기시거나 공식 홈페이지에 직접 접속하셔서 HT for Web 매뉴얼을 확인해보세요. 생각지도 못한 다양한 효과를 빠르게 얻을 수 있습니다~
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.