ENG
  • KOR
  • ENG
  • JPN

highcharts

chart visualization ui-component

Highcharts는 순수 자바스크립트로 작성된 차트 라이브러리로, 웹 사이트나 웹 어플리케이션에 인터랙티브 차트를 쉽게 추가할 수 있게 해줍니다. Highcharts는 라인, 스플라인, 영역, 영역스플라인, 컬럼, 바, 파이, 산점도 차트 타입을 지원합니다. 상업적 사용을 위해서는 라이선스를 구매해야 합니다.

Latest Ver 12.2.0
Homepage
Github
0
12,231
📢 Highcharts는 다양한 차트 타입을 지원하는 자바스크립트 차트 라이브러리입니다. 상업적 사용에는 라이선스가 필요합니다.

CDN 다운로드

License: CC-BY-NC-3.0
전체 버전 보기
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/A11yI18n.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/A11yI18n.min.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/Accessibility.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/Accessibility.min.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/AccessibilityComponent.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/AccessibilityComponent.min.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/Components/AnnotationsA11y.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/Components/AnnotationsA11y.min.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/Components/ContainerComponent.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/Components/ContainerComponent.min.js

Sample Code

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요. 
📄 HTML
<div id='container' style='width:100%; height:400px;'>
</div>

🧩 External JS
<script src="https://code.highcharts.com/highcharts.js"></script>

⚙️ JavaScript
document.addEventListener('DOMContentLoaded', function () {
  var myChart = Highcharts.chart('container', {
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Fruit Consumption'
    },
    xAxis: {
      categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
      title: {
        text: 'Fruit eaten'
      }
    },
    series: [{
      name: 'Jane',
      data: [1, 0, 4]
    }, {
      name: 'John',
      data: [5, 7, 3]
    }]
  });
});

Related Libraries

Library Icon
Chart.js

Chart.js는 웹 페이지에 간단하고 반응성 높은 차트를 제공하는 경량의 클라이언트 사이드 라이브러리입니다. 다양한 차트 유형을 지원하며, 구성과 사용이 매우 쉽습니다.

⚡ Top Tools for Developers
Text Compare

텍스트 비교

두 텍스트의 차이점을 한눈에 확인하세요.

Favicon Generator

Favicon 생성기

파비콘을 쉽고 빠르게 생성하세요.

Lorem Ipsum Generator

Lorem Ipsum 생성기

디자인을 위한 더미 텍스트를 생성하세요.

Character Counter

글자수 세기

글자 수와 단어 수를 실시간으로 확인하세요.

SRT ↔ SMI

SRT ↔ SMI 변환기

자막 형식을 간편하게 변환합니다.

Text Extract(OCR)

이미지 텍스트 추출

이미지 속 텍스트 자동 추출