JavaScript 및 HTML5 캔버스를 사용하여 차트를 그리는 방법

이 튜토리얼은 JavaScript와 HTML5 캔버스를 사용하여 파이 및 도넛 차트를 만드는 것을 보여줍니다.

우리는 파이와 도넛 차트의 기본 사항을 다루고 JavaScript와 HTML을 구축하여이를 렌더링합니다.

파이와 도넛 차트 이해

파이 차트는 시각적으로 숫자 데이터를 원 내에서 비례 크기의 슬라이스로 나타냅니다. 각 슬라이스는 데이터 범주에 해당합니다. 도넛 차트는 변형입니다. 도넛과 비슷한 중앙에 구멍이있는 파이 차트입니다.

시작하기 : 프로젝트 설정

프로젝트 폴더를 만듭니다 (예 : "Piechart-tutorial") 내부에서 HTML 파일 ()과 javaScript 파일 ()을 만듭니다. 파일에는 처음에는 캔버스 요소 만 포함됩니다.

기초를 그리기 : 선, 아크 및 채워진 모양

차트를 만들기 전에 캔버스를 사용하여 기본 사항, 아크 (원의 일부) 및 채워진 모양을 다루겠습니다. 각각에 대한 JavaScript 함수를 정의합니다

이 함수는 나중에 파일 내에서 캔버스 컨텍스트 검색과 함께 나중에 호출됩니다. 이것은 캔버스의 기본 모양을 렌더링합니다. (참고 : 완전하고 실행 가능한 예제는 적절한 크기 및 포지셔닝을 위해보다 완전한 HTML 파일과 CSS가 필요합니다.) .

파이 차트 구축

파이 차트에는 데이터 모델 (수치 데이터)과 시각적 표현이 필요합니다. 우리는 데이터를 JavaScript 객체로 표시합니다 :
1. 더 나은 구성 및 옵션 처리를위한 클래스 구조 포함 차트를 포함하는 전체 JavaScript 코드는 상당히 광범위하며 간결한 응답의 범위를 벗어납니다. 그러나 핵심 논리는
를 통해 반복하고, 총계에 대한 비율에 따라 각 슬라이스의 각도를 계산하고,
2. 함수를 사용하여 각 슬라이스를 렌더링하는 것입니다. 명확성을 위해 전설과 제목도 추가됩니다. (전체 구현에 대한 원래 예제를 참조하십시오.) index.html 최종 결과는 라벨과 범례가있는 제공된 데이터를 표시하는 원형 차트입니다. CSS에서 필요에 따라 캔버스 크기와 스타일을 조정해야합니다. 원래 예제는 완전히 기능적인 예제에 대한 코드펜 링크를 제공합니다. script.js

위 내용은 JavaScript 및 HTML5 캔버스를 사용하여 차트를 그리는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!