timqian/chart.xkcd

어떤 프로젝트인가요?

핵심 기능

• 01선형 차트와 여러 종류의 차트를 손그림처럼 투박한 느낌으로 렌더링합니다.
• 02페이지의 단일 SVG 요소에 모든 내용을 그립니다.
• 03레이블과 데이터셋을 포함한 간단한 데이터 객체로 설정합니다.
• 04CDN이나 npm을 통해 일반 브라우저 스크립트로 사용할 수 있습니다.
• 05제목과 x/y축 레이블을 지원합니다.

활용 사례

• 블로그 게시물이나 프레젠테이션에 재미있고 편안한 느낌의 차트를 추가합니다.
• 기업적인 분위기가 아닌 손그림 스타일로 추정치나 계획을 표현합니다.
• 빌드 단계 없이 정적 HTML 페이지에 간단한 차트를 삽입합니다.

빠른 시작

1. 1

   페이지에 chart.xkcd 스크립트와 SVG 노드를 포함합니다

   <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@2/dist/chart.xkcd.min.js"></script>
2. 2

   SVG 요소에 new chartXkcd.Line을 사용해 선 그래프를 만듭니다

포함된 컬렉션

토픽

자주 묻는 질문

chart.xkcd은(는) 무엇인가요?

SVG를 사용해 선형 차트, 막대 차트 등을 xkcd풍의 손그림처럼 투박한 스타일로 렌더링하는 JavaScript 차트 라이브러리입니다. chart.xkcd는 xkcd 만화에서 영감을 얻은 투박하고 만화 같은 손그림 스타일로 차트를 그리는 JavaScript 차트 라이브러리입니다. 페이지의 단일 SVG 요소에 차트를 렌더링하므로, 스크립트를 포함한 뒤 대상 <svg> 노드를 지정하기만 하면 차트를 만들 수 있습니다.

chart.xkcd은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

chart.xkcd은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

chart.xkcd은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. chart.xkcd의 마지막 커밋은 2026년 10월 21일입니다.

chart.xkcd은(는) 어디에 사용할 수 있나요?

블로그 게시물이나 프레젠테이션에 재미있고 편안한 느낌의 차트를 추가합니다. 기업적인 분위기가 아닌 손그림 스타일로 추정치나 계획을 표현합니다. 빌드 단계 없이 정적 HTML 페이지에 간단한 차트를 삽입합니다.

chart.xkcd는 어떻게 설치하나요?

페이지에 chart.xkcd 스크립트와 SVG 노드를 포함합니다: <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@2/dist/chart.xkcd.min.js"></script> SVG 요소에 new chartXkcd.Line을 사용해 선 그래프를 만듭니다

chart.xkcd은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/timqian/chart.xkcd