집 > 기사 > 웹 프론트엔드 > 캔버스에서 3D 동적 차트를 만드는 방법

캔버스에서 3D 동적 차트를 만드는 방법

php中世界最好的语言원래의: 2018-03-27 14:05:032495검색

이번에는 캔버스동적 3D 차트를 만드는 방법을 알려드리겠습니다. 캔버스를 사용하여 3차원 동적 차트를 만들 때 주의할 점은 무엇인가요? 다음은 실제 사례입니다.

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

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

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

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

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

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

설명 'shape3d':cylinderModel 이 스타일을 설정하려면 먼저 Shape3d

attribute

가 3D 모델로 표시되는 아이콘 효과를 지정합니다. 그런 다음 동적으로 변경되는 myHeight 속성을 설정합니다. HT에서는 node.a 메소드가 사용자가 비즈니스 데이터를 저장하도록 예약되어 있습니다.

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

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);

먼저 'shape3d'를 설정해야 합니다. .transparent'를 true 로 설정한 다음 'shape3d.opacity' 투명도를 설정합니다.

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

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

저희가 사용하는 서체 폰트는 한 단어가 무수히 많은 삼각형으로 이루어진 방식으로 그려져 있어서 메모리를 많이 차지해서 그래픽 곡선의 세밀함을 낮은 수준으로 조정했습니다만, 여전히 매우 선명합니다. 더 나은 성능을 가진 글꼴을 찾으면 사용할 수 있으며 적은 양의 메모리를 차지하는 글꼴을 찾지 못했다고 알려주세요.

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

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);

여기서 내 사용자 정의 속성인 "myHeight"가 결정적인 역할을 합니다. 변수를 저장하고, 변수

의 값을 마음대로 변경할 수 있어 동적 바인딩 효과를 얻을 수 있습니다.

이해가 되지 않으면 메시지를 남기시거나 당사 공식 홈페이지에 직접 접속하여 HT for Web 매뉴얼을 확인하실 수 있습니다. 생각지도 못한 효과가 더 많고 빠르게 달성될 수 있습니다~믿습니다. 이 기사의 사례를 읽고 나면 방법을 마스터했으며 더 흥미로운 일이 있을 것입니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!