집 > 기사 > 웹 프론트엔드 > HTML5 Canvas 기반의 3D 동적 차트

HTML5 Canvas 기반의 3D 동적 차트

不言원래의: 2018-06-20 10:53:582193검색

이 글은 주로 HTML5 Canvas를 기반으로 한 3D 동적 차트의 예를 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.

산업용 SCADA나 통신망 관리에 사용되는 차트가 많이 있는 것을 발견했습니다. 대부분의 사람들이 차트 제작에 echart를 사용하지만 사용하기는 정말 쉬운데, 이때 다른 플러그인을 호출할 수 없는 경우가 있습니다. 이 아름다운 차트는 제가 직접 작성해야 하는데, 차트는 쉽게 아름다워질 수 없습니다. . . 웹사이트에서 판매하는 차트를 보고 꽤 괜찮다고 생각해서 HT for Web 3D를 사용해서 아주 간단하고 예쁘네요 ㅎㅎ~

동적 렌더링은 다음과 같습니다

이 예는 HT로 구현하기가 정말 쉽습니다. 먼저 HT에서 기본 dm 데이터 모델을 만든 다음 데이터 모델을 g3d 3d 구성 요소에 추가한 다음 3d에서 관점을 설정하고 3d 구성 요소를 body 요소에 추가하세요.

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

다음 단계는 이 5개의 차트 막대를 만드는 것입니다. 내 생각은 내부 레이어에 노드가 있고 외부 레이어에 투명 노드가 있으며 하단에 현재 백분율을 표시하는 3D 텍스트가 있다는 것입니다. .

내부 레이어에서 노드를 생성하는 것은 매우 쉽습니다. HT로 캡슐화된 ht.Node를 사용하여 새 노드 객체를 직접 만든 다음 node.s 메서드를 통해 노드 노드의 스타일을 설정했습니다.

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

더 설명해야 할 점은 'shape3d':cylinderModel 스타일 설정으로, 먼저 Shape3d 속성은 3D 모델로 표시되는 아이콘 효과를 지정하는 것입니다. 웹 모델링 매뉴얼:

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

그런 다음 동적으로 변경되는 myHeight 속성이 설정됩니다. HT에서는 node.a 메소드가 사용자가 비즈니스 데이터를 저장하도록 예약되어 있습니다.

다음으로 만들어야 할 것은 외부 투명 노드입니다. 이 노드의 구성은 좀 더 "투명한" 스타일 설정을 제외하고는 기본적으로 내부 노드와 동일합니다.

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

'shape3d first.transparent'를 설정한 다음 'shape3d.opacity' 투명도를 설정합니다.

마지막은 3D 텍스트입니다. 3D 텍스트를 렌더링하려면 json 형식의 서체 글꼴이 필요하며, ht.Default.loadFontFace를 통해 json 형식 글꼴을 메모리에 로드합니다. 자세한 내용은 HT for Web 3D를 참조하세요. manual:

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

저희가 사용하는 서체 폰트는 한 단어가 무수히 많은 삼각형으로 구성되어 메모리를 많이 차지하는 방식으로 그려지기 때문에 그래픽 곡선의 세밀함을 촘촘하게 조정했습니다. 더 낮은 수준이지만 여전히 매우 명확합니다. 성능을 찾으면 더 나은 글꼴을 사용할 수 있으며 메모리를 덜 차지하는 글꼴을 찾지 못했습니다.

마지막으로 차트의 막대 그래프를 동적으로 변경하려면 애니메이션을 설정하고 동기식으로 3D 글꼴 값을 업데이트해야 합니다.

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

여기서 내 사용자 정의 속성인 "myHeight"가 결정적인 역할을 합니다. 이 속성을 사용하여 변수를 저장하고 변수의 값을 임의로 변경할 수 있으므로 동적 바인딩 효과를 얻을 수 있다는 것입니다.

이해가 안 되시면 메시지를 남겨주시거나 공식 홈페이지에 직접 접속하셔서 HT for Web 매뉴얼을 보시면 생각지도 못한 다양한 효과를 빠르게 보실 수 있습니다~

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목해 주세요.

HTML5 Canvas 기반의 3D 동적 차트

관련 기사