매우 아름다운 무료 순수 JavaScript 차트 라이브러리

하이차트란 무엇인가요?

Highcharts는 웹사이트나 웹 애플리케이션에 쉽고 편리하게 대화형 차트를 추가할 수 있는 순수 JavaScript로 작성된 차트 라이브러리이며 개인 학습, 개인 웹사이트 및 비상업적 용도로 무료로 제공됩니다. 사용. 현재 HighCharts에서 지원하는 차트 유형에는 곡선 차트, 영역 차트, 막대 차트, 원형 차트, 분산형 차트 및 종합 차트가 포함됩니다.

HighCharts는 JavaScript로 작성되었기 때문에 Flash나 Java처럼 실행하기 위해 플러그인이 필요하지 않으며 빠르게 실행되는 아름다운 인터페이스를 가지고 있습니다. 또한 HighCharts는 호환성이 매우 뛰어나며 대부분의 최신 브라우저를 완벽하게 지원할 수 있습니다. 현재 최신 공식 버전은 HighCharts2.3.5입니다.

기능

우수한 호환성 제공: iPhone, iPad, 심지어 Internet Explorer 6을 포함한 모든 최신 브라우저에서 잘 작동합니다. 표준 브라우저는 그래픽 그리기에 SVG를 사용하는 반면 기존 Internet Explorer는 그리기에 VML을 사용합니다.

비상업 사용자에게는 완전 무료입니다. 개인 웹사이트, 학교 웹사이트 또는 비영리 조직에서 Highcharts를 사용하려는 경우 승인이 필요하지 않습니다.

오픈 소스: Highcharts의 무료 버전을 사용하든 상용 라이센스 버전을 사용하든 소스 코드를 다운로드하고 직접 수정할 수 있으므로 사용자에게 큰 자유가 제공됩니다.

순수한 JavaScript: Highcharts는 완전히 기본 브라우저 기술을 기반으로 하며 Flash나 Java와 같은 클라이언트 측 플러그인이 필요하지 않습니다. 또한 PHP나 ASP.NET을 포함하여 서버에 아무것도 설치할 필요가 없습니다. Highcharts에는 두 개의 핵심 파일만 필요합니다. highcharts.js 코어 파일과 웹 페이지에서 이미 사용 중일 수 있는 jQuery, MooTools 또는 Prototype 프레임워크 중 하나입니다.

다양한 차트 유형: Highcharts는 선 차트, 곡선 차트, 영역 차트, 영역 곡선 차트, 막대 차트, 원형 차트, 분산형 차트 등과 같은 일반적인 차트 유형을 지원하고 이를 하나의 차트로 결합할 수 있습니다.

간단한 구성 구문: Highcharts 구성에는 프로그래밍 기술이 필요하지 않으며 구성 변수에는 간단한 JavaScript 개체만 필요합니다.

동적: 차트를 만든 후 언제든지 완전한 API를 통해 계열 및 데이터 포인트를 추가, 삭제, 수정할 수 있을 뿐만 아니라 축도 수정할 수 있습니다. 많은 이벤트는 jQuery의 AJAX API, MooTools 또는 Prototype 프레임워크와 결합하여 차트 프로그래밍을 위한 후크를 제공하며 서버 데이터를 실시간으로 동적으로 표시할 수 있는 솔루션도 제공합니다.

다중 축: 기온, 강수량, 기압 등 다양한 측정값에 대한 데이터를 비교해야 하는 경우가 있습니다. Highcharts를 사용하면 각 데이터 세트에 대해 서로 다른 Y축을 설정할 수 있습니다. 범주 데이터를 다른 X축으로 설정할 수도 있습니다. 각 축은 차트의 위, 아래, 왼쪽, 오른쪽 어디에나 배치할 수 있으며 뒤집기, 스타일, 위치를 포함한 모든 옵션을 개별적으로 설정할 수 있습니다.

팁 라벨: 차트의 특정 지점이나 계열에서 마우스가 멈추면 관련 정보가 포함된 툴바 팁이 표시될 수 있으며, 차트 위에서 마우스를 움직이면 자동으로 해당 지점에 가장 가까운 팁을 선택합니다. 마우스를 사용하면 포인트가 표시되어 차트 데이터를 보는 데 매우 편리합니다.

타임라인: 차트의 75%에는 정오 등의 타임라인이 있습니다.

내보내기 및 인쇄: 내보내기 모듈이 활성화된 경우 사용자는 내보내기 버튼을 클릭하여 차트를 PNG, JPG, PDF 또는 SVG 형식으로 내보내거나 직접 인쇄할 수 있습니다.

Zoom: 차트에서 관심 있는 부분을 확대/축소할 수 있습니다. Zoom은 X축, Y축 또는 두 축에 동시에 적용할 수 있습니다.

외부 데이터 로드: Highcharts 데이터는 JavaScript 배열에서 가져오므로 데이터는 로컬 구성 개체나 별도의 파일 또는 다른 웹사이트에서 정의될 수 있습니다. 또한 데이터를 배열로 구문 분석하는 콜백 함수만 사용하면 데이터를 어떤 형태로든 Highcharts에 전달할 수 있습니다.

각도 측정기: 대시보드 및 각도 측정기의 경우 Highcharts는 데이터를 한눈에 볼 수 있는 속도계와 같은 차트를 제공합니다.

극좌표 차트: 데카르트 차트는 쉬운 옵션을 사용하여 극좌표 또는 방사형 차트로 변환할 수 있습니다.

차트 반전 또는 뒤집기: X축이 수직이 되도록 차트를 뒤집어야 하는 경우도 있는데 이 기능도 지원됩니다.

레이블 회전: 축 레이블, 데이터 포인트 레이블, 축 제목 레이블을 포함한 모든 텍스트 레이블을 어떤 각도로든 회전할 수 있습니다.

호출 방법

var Chart = new Highcharts.Chart({

차트: {…}

색상: [{…}]

크레딧: {…}

내보내기: {…}

글로벌: {…}

라벨: {…}

        랭: {…}

        범례: {…}

        로드 중: {…}

        탐색: {…}

        창: { …}

        줄거리 옵션: {…}

        시리즈: [{…}]

        부제: {…}

        제목: {…}

        툴팁: {…}

        x축: {…}

        y축: {…}

});