Home-theater-designers
데이터 기반 의사결정 시대에는 사람들이 이해할 수 있는 방식으로 데이터를 시각화하는 것이 매우 중요합니다. 차트와 그래프는 복잡한 데이터, 추세, 패턴을 쉽게 이해하는 데 도움이 됩니다.
MUO 오늘의 영상 콘텐츠를 계속하려면 스크롤하세요.
데이터 시각화를 위해 널리 사용되는 JavaScript 라이브러리인 Chart.js를 사용하여 간단한 차트를 만드는 방법을 살펴보겠습니다.
인쇄 화면 없이 스크린샷을 찍는 방법
Chart.js란 무엇입니까?
차트.js 개발자가 웹 앱용 대화형 차트를 만드는 데 도움이 되는 무료 도구입니다. HTML5 캔버스 요소는 차트를 렌더링하여 최신 브라우저에서 작동할 수 있도록 합니다.
Chart.js의 특징
기능은 다음과 같습니다:
- Chart.js는 사용자 친화적인 접근 방식이 돋보입니다. 최소한의 코드로 개발자는 시각적으로 매력적인 대화형 차트를 만들 수 있습니다.
- 라이브러리는 다목적이며 선, 막대, 파이, 레이더와 같은 다양한 차트 유형을 지원합니다. 다양한 데이터 표현 요구를 충족할 수 있습니다.
- Chart.js는 데스크톱 및 모바일 장치에서 잘 작동하도록 차트를 디자인합니다. 그들은 반응이 빠르고 적응력이 뛰어납니다.
- 기본 설정 대신 다양한 옵션을 사용하여 Chart.js 차트를 변경할 수 있습니다. 개발자는 특정 요구 사항에 맞게 차트를 미세 조정할 수 있습니다.
환경 설정
다음 두 가지 방법 중 하나로 라이브러리를 설정할 수 있습니다.
- CDN 사용 . HTML 문서의 헤드에 다음 스크립트 태그를 포함시키기만 하면 됩니다.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> - 패키지 관리자 사용. 패키지 관리자를 선호한다면 다음을 사용하여 Chart.js를 설치할 수 있습니다. npm, 노드 패키지 관리자 :
또는 털실:npm install chart.jsyarn add chart.js
기본 HTML 구조
차트를 삽입하려면 HTML에 캔버스 요소가 필요합니다. 기본 구조는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Welcome to My Data Representation</h1>
<canvas id="myChart" width="400" height="150"></canvas>
<script></script>
</body>
</html>
페이지 스타일을 지정하려면 파일을 생성하세요. 스타일.css 을 클릭하고 다음 CSS를 추가합니다.
@import url("https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: "Tilt Neon", sans-serif;
padding: 2rem 4rem;
}
h1 {
font-size: 3rem;
color: #333;
text-align: center;
padding: 3rem;
}
첫 번째 차트 작성: 막대 차트 예
이 예에서는 개별 데이터 요소를 범주별로 비교하는 데 이상적인 막대 차트를 사용합니다.
- 에서 스크립트 HTML 하단에 태그를 추가하려면 먼저 id 속성(
let canvas = document.getElementById('myChart');)을 사용하여 캔버스 요소를 선택하세요. - 다음으로 차트를 렌더링하는 방법에 대한 컨텍스트를 얻습니다. 이 경우에는 2D 도면 컨텍스트입니다.
let ctx = canvas.getContext('2d'); - 다음으로, 다음을 사용하여 캔버스에서 새 차트를 초기화합니다. 차트() 기능. 이 함수는 캔버스 컨텍스트를 첫 번째 인수로 취한 다음 차트에 표시할 데이터를 포함하는 옵션 개체를 취합니다.
- 그런 다음 옵션 개체를 채워 차트 유형, 데이터 및 차트에 원하는 레이블을 지정합니다.
let options = {
type: "bar",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: "Total number of votes on favourite color",
data: [12, 19, 3, 5, 2, 3],
}],
},
};
현재 차트는 다음과 같습니다.
차트 스타일 지정 및 사용자 정의
Chart.js는 다음과 같이 차트를 사용자 정의할 수 있는 다양한 옵션을 제공합니다.
Windows 10 시작 시 검은 화면
- 그림 물감 : Chart.js를 사용하여 막대 배경부터 선 테두리까지 차트 색상을 사용자 정의하세요.
- 전설 : 명확성을 위해 범례를 위쪽, 아래쪽, 왼쪽 또는 오른쪽에 배치합니다.
- 툴팁 : 자세한 통찰력을 얻으려면 도구 설명을 사용하세요. 마우스를 올리면 나타나는 데이터 포인트.
- 애니메이션 : 동적 표시를 위해 차트 애니메이션의 스타일과 속도를 설정합니다.
간단한 예로 다음과 같이 옵션 개체를 변경하여 데이터세트의 몇 가지 기본 스타일을 설정할 수 있습니다.
let options = {
type: "bar",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: "Total number of votes on favourite color",
data: [12, 19, 3, 5, 2, 3],
backgroundColor: "rgba(75, 192, 192, 0.2)",
borderColor: "rgba(75, 192, 192, 1)",
borderWidth: 1,
}],
},
};
이제 차트는 다음과 같아야 합니다.
모범 사례 및 성능 팁
차트를 렌더링할 때 최적의 성능을 보장하려면 다음을 수행하십시오.
- 더 빠른 렌더링과 더 나은 사용자 경험을 위해 Chart.js에서 사용되는 데이터 포인트를 제한하십시오.
- 차트를 자주 업데이트하는 경우 새 차트를 렌더링하기 전에 destroy() 메서드를 사용하여 이전 차트를 제거하세요.
일반적인 함정을 피하기 위한 팁
피해야 할 몇 가지 함정은 다음과 같습니다.
- 예상치 못한 일이 발생하지 않도록 데이터의 형식이 항상 동일한 방식으로 지정되었는지 확인하세요.
- 성능을 향상하려면 애니메이션을 제한하는 것이 가장 좋습니다. 사용자 경험을 향상시키는 데 도움이 될 수 있지만 너무 많이 사용하면 문제가 발생할 수 있습니다.
Chart.js: 웹 데이터 시각화 강화
Chart.js는 대화형 데이터를 매력적인 방식으로 표시하려는 경우 유용한 도구입니다. 통찰력을 제공하고 결정을 알리는 아름다운 데이터 시각화를 쉽게 만들 수 있습니다.
Chart.js는 개발 경험이 있든 없든 상관없이 데이터 시각화를 위한 강력한 솔루션을 제공합니다.