Chart.js 2.0 소개

이 기사는 우리의 현대 자바 스크립트 선집의 일부입니다. Modern JavaScript에 대한 포괄적 인 가이드를 보려면 Sitepoint Premium을 탐색하고 사본을 다운로드하십시오. Tim Severien과 Simon Codrington이 검토 한 동료. 모든 Sitepoint의 동료 검토 자에게 감사합니다! 데이터가 많은 웹 사이트에는 효과적인 데이터 시각화가 필요합니다. 인간이 파악하기가 어렵습니다. 차트와 그래프는 영어 이외의 스피커에게도 직관적이고 접근 가능한 대안을 제공합니다. 명확한 영상은 이해와 웹 사이트 매력을 향상시킵니다 이 튜토리얼은 JavaScript 차트 라이브러리 인 Chart.js를 소개합니다. 6 가지 예를 통해 사용 및 구성을 시연 할 것입니다.

Chart.js 2.0의 주요 특징 : 다양한 차트 생성을위한 다목적이고 사용자 친화적 인 JavaScript 라이브러리 간단한 설치 및 빠른 학습 곡선 는 라인, 바, 레이더, 극지, 파이 및 도넛의 다양한 차트 유형을 지원합니다. 차트 유형은

속성을 ​​통해 쉽게 변경됩니다 <:> 강화 된 기능 : 모바일 응답 성 및 통합 타이틀 사용자 정의 가능한 상호 작용 (예 : 범례 클릭을 통해 데이터 세트 토글) 외관 (색상, 툴팁, 애니메이션)을위한 광범위한 사용자 정의 옵션

왜 차트 .js?

Chart.js는 강력한 사용자 정의와의 사용 편의성을 균형을 유지합니다. 더 복잡한 라이브러리의 가파른 학습 곡선을 피하면서 충분한 유연성을 제공합니다. 8 개의 차트 유형은 대부분의 시각화 요구를 다룹니다. 활발한 오픈 소스 커뮤니티는 고품질 유지 보수를 보장합니다. 버전 2.0은 상당한 구문 개선 및 모바일 지원을 도입했습니다. 이 튜토리얼은 Chart.js 2.0을 사용합니다. 1.0 ~ 2.0 전환 섹션이 포함되어 있습니다.

chart.js 설치 :

Chart.js는 단순성을 우선시합니다. 가장 쉬운 설치 방법은 CDN을 통한 것입니다

당신은 또한

요소가 필요합니다 :

또는 패키지 관리자를 사용하십시오 (자세한 내용은 시작 가이드 참조). Chart.js의 기능을 탐색합시다 라인 차트 : 이 최소 줄 차트는 Chart.js의 핵심 구조를 보여줍니다

Codepen 예

를 참조하십시오 설명 :
:
• . 의 2D 렌더링 컨텍스트를 가져옵니다 : 차트 객체를 만듭니다. 차트 유형을 지정합니다. 는 차트 데이터를 보유합니다. 어레이 지수는 그래프 위치를 결정합니다
pro 팁 :
• 레전드를 클릭하면 데이터 세트가 전환됩니다. 이것은 모든 차트 유형에 적용됩니다. type 막대 차트 :

이전 예에서는 type: 'line'로 type: 'bar'로 변경됩니다

Codepen 예

를 참조하십시오 레이더 차트 : 변경 로 . 겹치는 데이터를 사용하여 더 나은 가독성을 위해

및

를 조정하십시오. Codepen 예

를 참조하십시오 극성 차트 :

type 변경 로 . Polar 차트는 단일 데이터 세트를 시각화합니다 'radar' Codepen 예 backgroundColor 를 참조하십시오 borderColor 파이와 도넛 차트 :

변경 로 또는 를 변경하십시오. 도넛 차트는 를 사용하여 구멍 크기를 제어합니다 Codepen 예제 (Pie) 를 참조하십시오 Codepen 예제 (도넛) 를 참조하십시오 Chart.js 구성 () :

속성은 광범위한 사용자 정의를 허용합니다 : 제목 :

: type 도넛 차트의 구멍 크기 (0-50)를 제어합니다 스택 막대 차트 : 'polarArea' 스택 막대에

를 사용하십시오

이벤트 취급 : 범례 사용자 정의 클릭 클릭 :

예 : 동적 캡션 업데이트 :

Codepen 예제 참조이 예는 전설 클릭을 기반으로 캡션을 업데이트합니다. 차트 2.0 vs. 1.0 : <:> 주요 차이점 :

차트 선언 : 2.0은 , type 및 가있는 단일 'pie' 호출을 사용합니다. 1.0은 함수 체인을 사용합니다 모바일 지원 : 2.0에는 기본 모바일 지원이 포함되어 있습니다 통합 타이틀 : 2.0 내장 타이틀을 제공합니다 'doughnut' cutoutPercentage 결론 :

Chart.js는 빠른 차트 프로토 타이핑에 이상적입니다. 다양한 차트 유형과 사용 편의성으로 인해 모든 웹 개발자에게 유용한 도구가됩니다. 포괄적 인 세부 사항은 공식 Chart.js 문서를 참조하십시오 (참고 : 를 각 차트 유형에 대한 실제 코피 펜 링크로 교체하십시오.)

위 내용은 Chart.js 2.0 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!