이것은 블록을 즉시 생성하는 데 사용할 수 있는 준비된 코드입니다. 이것은 Chart.js의 기초입니다. 시작하려면 이것을 준비하세요.
Chart JS 시작하기
아래 코드를 복사하면 즉시 차트가 생성됩니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Getting Started with Chart JS with www.chartjs3.com</title>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartMenu {
width: 100vw;
height: 40px;
background: #1A1A1A;
color: rgba(54, 162, 235, 1);
}
.chartMenu p {
padding: 10px;
font-size: 20px;
}
.chartCard {
width: 100vw;
height: calc(100vh - 40px);
background: rgba(54, 162, 235, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 700px;
padding: 20px;
border-radius: 20px;
border: solid 3px rgba(54, 162, 235, 1);
background: white;
}
</style>
</head>
<body>
<div class="chartMenu">
<p>WWW.CHARTJS3.COM (Chart JS <span id="chartVersion"></span>)</p>
</div>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart"></canvas>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
<script>
// setup
const data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: 'Weekly Sales',
data: [18, 12, 6, 9, 12, 3, 9],
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(0, 0, 0, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(0, 0, 0, 1)'
],
borderWidth: 1
}]
};
// config
const config = {
type: 'bar',
data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
// Instantly assign Chart.js version
const chartVersion = document.getElementById('chartVersion');
chartVersion.innerText = Chart.version;
</script>
</body>
</html>
Chart JS 블록
Chart JS 문서는 블록 방식으로 이동하고 있습니다. 기본적으로 3개의 블록이 있습니다. 이것들은 설정 또는 데이터 블록, 구성 블록 및 렌더 또는 초기화 블록입니다. 이 3개의 블록은 차트의 기본 구조를 이룹니다.
필요한 경우 더 많은 블록을 추가할 수 있습니다. 추가 블록은 일반적으로 특정 부분이 더 확장되기 시작할 때 추가됩니다.
설정 블록 또는 데이터 블록
설정 블록은 데이터 블록이라고도합니다. 이 블록은 데이터와 관련된 여러 JavaScript 객체를 포함하는 상수 변수 (const)입니다. 이것은 데이터 포인트, 레이블, 배경색, 호버 색상 등과 같은 모든 것이 될 수 있습니다.
이곳에는 차트의 값 또는 데이터 포인트와 관련된 다른 상수 값도 배치할 수 있습니다. 설정 블록 또는 데이터 블록 코드는 다음과 같으며 항상 가장 먼저 로드되어야 합니다. 모든 다른 블록이 데이터 블록에 의존하기 때문입니다.
// setup
const data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: 'Weekly Sales',
data: [18, 12, 6, 9, 12, 3, 9],
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(0, 0, 0, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(0, 0, 0, 1)'
],
borderWidth: 1
}]
};
구성 블록
구성 블록은 차트의 모든 구성 설정을 포함합니다. 구성은 렌더 블록 이전에 배치되어야 합니다. 이 블록은 데이터 블록에 의존하는 경향이 있기 때문입니다 data const 변수에 의존합니다.
세 가지 주요 부분은 차트 유형, 옵션 및 설정 또는 데이터 블록에 연결되는 데이터 변수입니다. 코드에서 "data" 는 ES6 JavaScript 코드를 사용하는 변수입니다.
// config
const config = {
type: 'bar',
data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};
We use “data,” only if we have a object value which is EQUAL to the const variable. If the const and object variable are identical we can do this. This means the upper text is a shorthand.
만약 const가 다른 경우에는 이렇게 전체 코드로 작성해야 합니다. const와 객체 값이 다르다는 것을 보니 코드를 더 상세하게 작성해야 합니다. 아래 내용을 참조하세요.
// config
const config = {
type: 'bar',
data: data2,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};
렌더 블록 또는 초기화 블록
만약 const가 다른 경우에는 이렇게 전체 코드로 작성해야 합니다. const와 객체 값이 다르다는 것을 보니 코드를 더 상세하게 작성해야 합니다. 아래 내용을 참조하세요.
// 렌더 초기화 블록
const myChart = new Chart(
document.getElementById('myChart'),
config
);
마지막으로 항상 로드되어야 하는 블록은 렌더 또는 초기화 블록입니다. 이 블록은 위의 모든 코드를 기반으로 캔버스에 차트를 그립니다. 다시 말해, 이 블록이 로드되기 전에 모든 블록이 로드되어야 합니다. 그렇지 않으면 오류가 발생할 수 있으며 특정 코드 블록이 제외될 수 있습니다.
2 replies on “Getting Started”
Its nice and working fine but is not working when creating another chart using the same technique in a same page. I need similar charts to be created 3 times in a single page showing different stats. Can you show how to do that?
Thank you for your question. You issue is ES6 shorthands. Make sure you watch the video on this page where I explain this.
Else you can watch this video:
https://youtu.be/CjlllW2RUrA