>웹 프론트엔드 >CSS 튜토리얼 >데이터 차트_VML 관련

데이터 차트_VML 관련

WBOY
WBOY원래의
2016-05-16 12:09:471424검색

이제 VML의 일부 애플리케이션을 살펴보겠습니다. 데이터 차트는 VML의 전문 분야라고 할 수 있습니다. 차트를 그릴 때 가장 중요한 단계는 데이터를 좌표로 변환하는 것입니다. VML은 벡터이기 때문에 소수점이 있는 좌표값이나 매우 큰 데이터를 좌표값으로 사용할 수 있기 때문에 데이터의 값 범위에 자유도가 크다.
차트를 만들기 전에 몇 가지 사항을 명확히 해야 합니다. 즉, 그룹을 사용하여 VML을 포함해야 하며 VML의 크기는 너비에 따라 결정됩니다. , 높이는 좌표 크기가 아닌 의해 결정됩니다. 다음으로 몇 가지 클래식 차트를 살펴보겠습니다.
곡선 차트(트렌드 차트) : 곡선처럼 보이지만 실제로는 분해하면 작은 폴리선으로 구성됩니다. 따라서 이를 수행하기 위해 PolyLine을 선택할 수 있습니다. 먼저 좌표축을 그려보겠습니다.










좌표축에 축척을 표시하고 싶을 수도 있습니다. 이는 좌표를 지정하기 위해 절대 위치 P를 사용하는 것도 쉽습니다. . 그룹 내부에서 절대값을 사용하는 것은 실제로 그룹을 기준으로 한 상대 위치 지정입니다. 좌표 값은 직접 조정해야 합니다. px=200+73*i;(여기서 200은 왼쪽으로부터의 거리)를 사용하고 세로 좌표는 py=2800-73*i입니다(총 높이는 2800이므로 빼야 합니다). 데이터를 좌표로 변환하는 것은 쉽습니다. 물론, 여기서는 0,1,2..7이거나 특정 데이터일 수 있습니다. 변환할 때 비율에 따라 좌표 값만 가져오면 됩니다. 예를 들어 수직 좌표 값은 다음과 같습니다. 100, 200, 300, 좌표에 대한 ..700의 해당 응답은 px=200+73*i*1/100입니다(여기서 i는 데이터 값이고 1/100은 데이터에 대한 좌표값)


차트를 그릴 준비는 끝났고, 이제 데이터만 있으면 됩니다. 데이터를 가지고 PolyLine에 데이터를 부어 넣으면 곡선이 표시됩니다. 이제 가짜 데이터를 사용하여 위의 내용이 어떻게 작동하는지 살펴보겠습니다!
이 섹션에는 많은 예가 있으므로 다음 페이지를 방문하세요.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.