항상 Chart JS를 배우고 싶지만 더 시각적인 방식으로 지침을 이해해야 했나요? 이 웹사이트는 더 시각적인 방식으로 Chart JS를 다룹니다. 여기서 목표는 더 높은 이해 수준을 보장하는 것입니다.
Chart JS 비디오 가이드
Chart JS는 많은 옵션을 가지면서도 여전히 상당히 간결한 JavaScript 라이브러리입니다. 이로 인해 Chart JS는 정말로 보물 같습니다. 많은 가능성이 있지만 이해하지 못한다면 그것을 보지 못할 수도 있습니다. 이 사이트는 Chart JS와 모든 가능성에 관한 최대한의 정보를 다룹니다. 탐험 준비되셨나요?
Chart.js란 무엇인가요?
자주 듣게 될 것은 Chart.js가 JavaScript로 차트를 그리기 위한 JavaScript 라이브러리 또는 프레임워크라고 합니다. 그러나 꽤 놀랍게도 사람들이 Chart.js를 사용하면 JavaScript와의 연관성을 보지 못한다는 것입니다.
많은 사람들은 Chart.js가 JavaScript를 기반으로 한다는 것을 잊어버리기 쉽습니다. 제가 말하는 것은 Chart.js가 사용하는 캔버스 태그의 복잡성 때문에 JavaScript 배열을 어떻게 Chart.js와 결합하는지를 보지 못한다는 것입니다.
차트는 캔버스 태그에 그려집니다. Chart.js가 사용하는 코드는 기본적으로 캔버스 내에서 정확한 x 및 y 좌표에 선, 점, 원 및 기타 모양을 그리는 지침입니다. Chart.js가 캔버스에 빠르게 차트를 그리기 위한 "부트스트랩"과 유사하다는 것을 이해하면 더 확실하게 이해할 수 있습니다.
Chart.js는 캔버스 API를 배울 필요가 없으므로 시간을 절약해줍니다. Chart.js 코드는 미리 작성된 템플릿이며 캔버스 API가 읽고 즉시 원하는 차트를 그릴 수 있습니다. 이 시간을 절약하는 도구는 여러분을 빠르게 앞서 나아갈 수 있도록 도와줍니다. 그렇지 않으면 캔버스 API가 읽을 수 있는 JavaScript 코드를 작성해야 하는데, 이는 코딩 용어로 "파싱"이라고 합니다.
그럼 질문으로 돌아가서 Chart.js는 무엇인가요? 이것이 Chart.js를 정의하는 방식입니다:
"Chart.js는 JavaScript로 작성된 미리 작성된 차트 템플릿으로, 캔버스 API가 읽을 수 있습니다."
www.Chartjs3.com
이 정의는 여러분이 작업을 시작하는 좋은 출발점을 제공합니다. 여러분은 즉시 이것이 JavaScript임을 이해하면서도 왜 약간 다른지에 대한 연결을 볼 수 있습니다. 이는 캔버스 태그에서 읽기 쉽게 작성되었습니다. 캔버스 API는 JavaScript로 작성되었지만 코드가 약간 다릅니다.
많은 사람들이 이 관련성을 보지 못하고 실제로는 더 깊은 수준에서 Chart.js를 이해하지 못하기 때문에 어려움을 겪고 있습니다. 캔버스 API를 어떻게 사용해야 하는지 또는 JavaScript로 어떻게 작성해야 하는지 이해하지 못하는 것은 나쁜 일이 아닙니다. 그러나 이것은 여러분의 옵션을 제한하고 차트의 상호 작용을 제한할 수 있습니다. 이 제한이 많은 사람이 막다른 길로 느끼는 것입니다.
Chart.js를 사용하려는 이유와 어려움은 무엇인가요?
Chart.js를 사용하려는 많은 사람들은 멋진 클릭 가능하고 상호 작용하는 차트를 상상합니다. 데이터가 데이터베이스 또는 JSON 객체에서 추상화되며 한 번 버튼을 클릭하면 새롭고 상쾌한 것으로 변경됩니다. 이것은 우리가 일반적으로 Ms. Excel에서 보는 표준 평면 차트 이상이어야 합니다. 불행하게도, Chart.js를 사용하는 방법이 여러 분야(JavaScript, Chart.js, 캔버스 API, MySQL, PHP, Node JS 등)에 대한 견고한 이해가 필요하다는 사실을 깨닫게 되면 차트를 상호 작용적으로 만드는 데 진짜로 어려움을 겪게 됩니다.
Chart.js에서의 난관을 극복하는 방법은 무엇인가요?
이 책의 목표는 Chart.js에서 경험하는 난관을 해소하는 것입니다. 많은 비디오를 가지고 있으며 가장 일반적으로 시청되는 비디오 주제가 상호 작용을 포함한 Chart.js와 관련된 것임을 알게 되어 그에 대한 책을 다루기로 결정했습니다.
이 책은 여러분이 목표를 달성하는 데 도움을 주기 위해 쓰여졌습니다. 이 책은 시각적 비디오 책입니다. 이것은 여러분이 학습할 것이지만 모든 주제가 비디오 형식으로 제공되어 더 나은 설명과 이해를 제공합니다. 많은 프로그래머들은 시각 중심적이며 이것이 웹사이트와 코딩과 관련된 이유입니다. 작동하는 것을 보고 어떻게 작동하며 왜 작동하는지를 이해하는 것이 Chart.js를 배우는 핵심입니다.
Chart.js 문서가 상호 작용 주제를 다루지 않는 이유는 무엇인가요?
Chart.js 문서를 읽어보셨을 수도 있으며, 그 문서는 대개 상호 작용에 대한 깊은 내용을 다루지 않는다는 것을 발견하셨을 것입니다. Chart.js 문서의 목표는 Chart.js를 사용하는 방법을 가르치는 데 도움을 주는 것입니다. 다시 말해, 그것은 그들의 범위를 벗어납니다. 그들은 차트를 그리는 방법을 설명하려고 하며, Chart.js와 관련이 없는 JavaScript, 캔버스 API 코드, MySQL 또는 기타 요소를 다루지 않습니다. 그들은 정확하게 그렇게 예상하고 있으며, 여러분이 Chart.js에서 차트를 그리는 방법을 배우고자 그들의 웹사이트를 방문하는 것을 기대하고 있습니다.
Chart.js는 JS 프레임워크라고 불립니다. 프레임워크는 두 개의 단어, "프레임"과 "워크"로 이루어져 있습니다. 이것은 고정된 범위 또는 프레임 내에서 작업한다는 것을 의미합니다. 이것을 그림 프레임으로 생각해보세요. 그림 프레임은 마치 "테두리"와 같습니다 (CSS를 생각해보세요). 그 테두리 바깥의 모든 것은 Chart.js에서 다루지 않는 것이고 범위를 벗어난 것입니다.
왜냐하면, Chart.js를 MySQL과 함께 배우려면 그들은 여러분에게 그것을 가르치려고 여기 있지 않다고 기대하기 때문입니다. 함께 사용하는 것이 유용하지만 Chart.js 문서는 문서를 간결하게 유지하기 위해 이러한 내용을 다루지 않는 것입니다. 그렇지 않으면 문서가 거대하고 관리하기 어려워질 것입니다. 다루어야 하는 모든 주제를 생각해보세요. 그 주제 중에는 다양한 프레임워크와 다른 프로그래밍 언어가 많이 포함되어 있습니다.
상호 작용형 Chart.js 문서
현재의 Chart.js 문서가 현재의 형식으로 작성된 이유에 대한 탄탄한 이해가 있으신 것 같습니다. 이제 Chart.js의 상호 작용 부분을 다루는 복잡성을 추가하는 것이 시기입니다.
상호 작용적인 차트를 만들려면 JavaScript 내에서 여러 가지 언어와 주제를 알아야 할 것입니다.
- HTML 입력 필드: 입력 필드는 차트에서 상호 작용의 시작점입니다.
- JavaScript 배열: 이를 이해하지 않으면 데이터를 어떠한 방식이나 형식으로든 조작할 수 없습니다.
- JavaScript 함수: 버튼을 클릭하거나 호버 효과가 트리거된 후 응답을 생성하는 데 필요한 함수입니다.
- Chart.js API: Chart.js는 캔버스 태그 관련 항목을 지원하는 몇 가지 고급 주제를 다룹니다.
- 데이터베이스 (MySQL, MongoDB 등): 데이터베이스 연결을 위해 가능한 여러 옵션이 있습니다. 많은 사람들이 프론트엔드와 백엔드가 모두 JS인 풀스택 JS 프로그래밍 언어로 이동하고 있습니다.
- 서버 측 스크립트 언어 (PHP, Node.js 등): 이것들은 프론트엔드와 백엔드 (데이터베이스 또는 서버) 사이의 중간 역할을 하는 중요한 요소입니다.
다음 장에서 이러한 주제를 다루겠습니다.
제1장: Chart.js에서 고정된 차트 만들기
Chart.js를 사용하여 차트를 만드는 것은 꽤 간단합니다. Chart.js 문서에는 멋진 데모 코드가 있습니다. 그러나 추가적인 설명은 종종 생략되는 경향이 있습니다. 중요한 부분은 코드 조각으로, 최종적으로 멋지게 연결되는 코드 덩어리입니다. Chart.js 2에서 기원한 오래된 데모 코드가 있지만 해당 코드를 사용하는 것은 권장하지 않습니다. 새로운 방법을 배우세요.
이러한 블록들은 일반적으로 3 개의 별도 부분으로 구조화되어 있지만 차트에 사용자 지정 조정 사항이 있는 경우 추가적인 부분이 있을 수 있습니다. 이러한 블록들은 Chart.js 코드의 뼈대 또는 기본 구조로 간주될 수 있습니다. 비디오에서 종종 이러한 부분을 다음과 같이 언급합니다:
- 설정 또는 데이터 블록
- 설정 또는 구성 블록
- 렌더링 또는 초기화 블록
설정 블록
설정 또는 데이터 블록에는 차트에서 사용하는 모든 기본 데이터가 포함됩니다. 레이블, 데이터셋, 데이터(데이터 포인트) 등 모든 내용이 여기에 속합니다.
구성 블록
구성 블록에는 데이터 블록 참조, 옵션 및 차트 유형이 포함됩니다.
렌더 블록
렌더 또는 초기화(초기화) 블록은 그 차트를 그릴 캔버스 태그에서 프로세스를 시작하거나 활성화합니다.
Chart.js 뼈대 블록 코드 비디오
"이 비디오에서는 Chart.js 문서에서 이전 데모 코드를 가져와 최신 버전으로 변환하는 방법을 다룹니다. Chart.js가 이 구조로 이동하기 시작함에 따라."
"원본 소스 코드를 얻고 싶다면 해당 페이지에서 더 많은 설명과 함께 전체 페이지를 찾을 수 있습니다."
이 페이지에는 동일한 비디오와 함께 Chart.js 블록 및 소스 코드에 대한 추가 정보도 포함되어 있습니다.
제2장: 렌더, 구성 및 데이터 블록 탐구
렌더 블록은 차트의 그리기를 다룹니다. 그것이 렌더 또는 초기화 블록이라고 불리는 이유를 설명합니다. 초기화는 시작을 나타내므로 차트를 처음부터 그리기 시작합니다. 이것은 특히 여러분이 차트를 실시간으로 업데이트하거나 다시 그리는 경우에 더 중요해집니다 chart.destroy API. 버튼을 클릭하여 다른 차트 유형으로 전환하려면 이것이 중요합니다.
구성 블록에서 다양한 차트 유형
Chart.js 3에는 다양한 차트 유형이 기본으로 포함되어 있으며 다음과 같은 차트 유형이 있습니다.
기본 차트 유형 외에도 콤보 차트와 같은 더 많은 옵션이 있지만 이러한 것들은 Chart.js에 내장된 기본 옵션입니다. 물론 대부분의 경우 더 고급 차트를 사용하고자 할 것이며, 이는 보다 사용자 정의된 기능을 제공합니다. 예를 들어 히스토그램 차트 그리고 더 고급인 다른 차트 유형들도 있으며, 나중에 그것들을 다루겠습니다.
그러나 기본 차트 유형을 변경하는 것은 매우 쉽습니다. Chart.js를 보면 구성 블록으로 이동하여 원하는 차트 유형을 삽입하면 됩니다.
// config block
const config = {
type: 'bar',
data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};여기에서는 조정해야 할 굵은 색깔 항목을 볼 수 있습니다. 그러나 상호 작용성의 계층을 만들려면 어떻게 해야 할까요?
차트 유형은 흥미로운 항목이지만, 꽤 간단합니다. 대부분의 차트 유형은 많은 유사점을 가지고 있지만 일부는 다를 수 있으며 파이 차트와 도넛 차트와 같이 축이 없을 수도 있습니다. 또는 레이더 차트와 같이 다른 구조를 가질 수도 있습니다. 곧 이에 대해 더 깊이 다룰 것이지만, 먼저 데이터를 수정하는 방법을 살펴보겠습니다.
데이터 블록과 데이터셋
가장 중요한 부분 중 하나는 데이터셋과 관련이 있습니다. 데이터셋은 데이터 포인트의 그리기를 다루는 블록입니다. 차트의 목표는 숫자를 그림으로 전달하여 숫자를 마음에 쉽게 받아들일 수 있게 하는 것입니다.
숫자를 하드 코딩하는 것은 간단하지만, 그것들을 더 소프트 코딩하는 것은 도전입니다. 이것은 주로 배열 조작에 기인합니다. 배열 데이터를 조작할 수 있으면 보여야 할 값만 표시하는 데 도움이 됩니다.
Chart.js를 사용하는 많은 사람들은 이 부분을 정말로 이해하지 못하는 경향이 있습니다. 주된 이유는 그들이 Chart.js를 다르게 보기 때문입니다. 종종 그들이 Chart.js의 큰 부분이 배열에 기반한다는 것을 발견하면 Chart.js가 실제로 Javascript이며 그와 함께 많은 캔버스 API 코드가 연결되어 있는 것임을 깨닫게 됩니다.
배열을 어떻게 수정하나요?
배열을 수정하는 데 일반적으로 4개의 가장 흔한 방법을 사용하지만 JavaScript에는 사용할 수 있는 배열 메서드의 전체 목록이 있습니다. 이것을 정말로 이해하려면 깊이 탐색하십시오 Chart.js 배열 시리즈. 다양한 항목을 다룹니다.
그러나 현재로서는 널리 사용되는 4가지 방법을 제공하는 것이 좋은 소개입니다. 더 많은 정보가 필요하다면 배열 조작을 다루는 19개의 다른 비디오 시리즈를 탐색하십시오.
- Push 배열 메서드, 배열 끝에 값을 추가합니다.
- Pop 배열 메서드, 배열에서 마지막 값을 제거합니다.
- Unshift 배열 메서드, 배열의 시작 부분에 값을 추가합니다.
- Shift 배열 메서드, 배열에서 첫 번째 값을 제거합니다.
이 네 가지 기본 배열 메서드를 사용하면 많은 작업을 수행할 수 있습니다. 그럼 이것들을 어떻게 사용하는지 살펴봅시다. 예제를 하나 가져와 보겠습니다.
const colors = ['red', 'blue', 'green'];
colors.push('yellow') // colors = ['red', 'blue', 'green', 'yellow'];
colors.pop() // colors = ['red', 'blue', 'green'];
colors.unshift('black') // colors = ['black', 'red', 'blue', 'green'];
colors.shift() // colors = ['red', 'blue', 'green'];보시다시피 각 배열 메서드는 어떤 작업을 수행하는지 그리고 어떻게 사용하는지를 보여줍니다. 이 경우 'colors'와 같은 배열 항목을 가져와서 배열 메서드를 끝에 추가하면 됩니다. push 또는 unshift와 같이 값을 추가하는 경우 배열에 추가될 값을 정의해야 합니다.
이것이 배열을 사용하는 가장 쉬운 방법입니다. 또한 Chart.js에서 데이터 구조라고 불리는 더 고급이고 강력한 방법이 있습니다.
데이터 구조는 데이터셋을 처리하기 위한 고급 방법입니다
데이터 구조는 작업을 수행하는 가장 강력하고 고급 방법 중 하나입니다. Chart.js는 이 항목에 작은 섹션을 할당하는데, 이는 데이터 구조가 배열 조작을 실제로 간소화할 수 있기 때문에 아쉬운 부분입니다. 본질적으로 데이터 구조는 차트에서 직접 읽을 수 있는 JavaScript 객체입니다.
Chart.js가 이것을 도입한 이유는 종종 JSON이나 객체에서 데이터를 가져오며 객체를 여러 배열로 수정하는 것은 의미가 없기 때문입니다. 기존 구조를 읽는 방법을 Chart.js에 가르치는 것이 훨씬 더 좋을 것입니다. 이것은 Chart.js 3.1에서 멋지게 소개되었습니다.
이것을 이해하기 위해 해당 주제를 다루는 여러 비디오가 별도의 페이지에서 제공됩니다. 모든 것을 시청해보세요 데이터 구조 비디오.
그러나 본질을 이해하도록 하려면 이 비디오가 기본적인 이해를 제공할 것입니다.
데이터 구조와 관련된 더 고급 주제는 다음에서 찾을 수 있습니다 데이터 구조 페이지를 강력히 추천합니다!
데이터 구조를 사용하려면 데이터 포인트를 얻을 위치를 Chart.js에 지시해야 하므로 x와 y 값을 다시 할당해야 합니다. 이를 위해 비디오에서 볼 수 있듯이 파싱과 xAxisKey 및 yAxisKey를 사용합니다.
파싱이란 어떤 것을 파싱하는 언어에서 읽을 수 있게 만드는 것을 의미합니다. 이 경우 새 데이터 객체를 Chart.js가 차트를 그릴 수 있도록 읽을 수 있게 파싱합니다.
데이터 구조는 Chart.js에서 가장 좋은 기능 중 하나이지만 실제로는 데이터와 차트를 자주 다룰 때에만 그 중요성을 알아차릴 수 있습니다. 이제 데이터의 가장 중요한 부분을 이해했으니 기능에 중점을 두어야 합니다.
Chart.js의 기능과 상호 작용
Chart.js에서 색상을 사용하면 강조하는 데 매우 유용할 수 있습니다. 색상 코드가 지점을 표현하면 말 없이도 정보를 전달할 수 있습니다. 예를 들어 음수 값을 빨간색으로, 양수 값을 녹색으로 표시하면 말하지 않아도 정보를 전달한 것입니다. 사용자가 직관적으로 이해할 가능성이 높을 것입니다.
배경색과 테두리 색상 설정은 데이터 블록 내 데이터셋 내에 있습니다. 이 비디오에서는 기본적인 색상 코드 옵션을 제어합니다. 값에 따라 녹색과 빨간색을 사용합니다.
다행히 이러한 옵션들은 아직 배열과 함께 작동하기 때문에 복잡하지 않습니다. 배열에 값을 추가하는 방법을 이해하면 더 직관적으로 색상을 다루기 시작할 수 있습니다. 새로운 기술을 마스터할 때마다 Chart.js에서 옵션을 확장할 수 있는 가능성이 더 커집니다.
아래의 모든 내용은 재정리하여 챕터로 구성해야 하는 구체적인 개념입니다.
Chart.js에서 "Time"과 "Time Series"의 차이를 이해하기
Chart.js에서는 종종 특정 날짜로 차트를 그려야 할 때가 있습니다. 주말 및 공휴일에는 데이터가 누락되거나 고정될 수 있으므로, 이러한 특정 날짜를 제거하여 차트를 깔끔하게 유지하고 싶을 수 있습니다.
Time chart in Chart.js (Chart.js의 시간 차트)
이 경우 시간 유형은 유용하지 않습니다. 왜냐하면 시간 간격의 차이에 기반하여 공간을 계산하기 때문입니다. 예를 들어 다음 데이터 포인트가 현재 데이터 포인트에서 일주일 뒤에 있다면 7개의 공간 세그먼트를 계산할 것입니다. 이로 인해 차트에 큰 간격이 생성됩니다. 아래의 x 축 스케일에서 간격을 확인할 수 있습니다.
Time series chart in Chart.js (Chart.js의 시계열 차트)
Chart.js에는 이러한 특정 문제에 대한 해결책으로 유용한 내장 기능인 timeseries가 있습니다. 이 기능은 등간격에 따라 모든 날짜를 설정합니다. "등간격"이라는 용어는 "equal"과 "distant"의 결합에서 파생되었습니다. 다시 말하면, 연도 간의 시간 간격과 관계없이 모든 다음 데이터 포인트를 동일한 간격으로 설정합니다. 아래 이미지를 참조하세요:
물론, 이렇게 하면 스케일이 날짜를 표시하는 방식을 수정해야 할 수 있으며, 대량의 데이터가 세그먼트 사이에 압축되어 있으면 겹칠 수 있습니다.
Chart.js에서 데이터셋에서 테이블을 생성하는 방법
Chart.js의 데이터를 기반으로 테이블을 생성하려면 JavaScript를 잘 이해해야 합니다. 특히 JavaScript에서 테이블 요소를 생성하고 JS에서 테이블 객체를 작성하는 방법을 이해해야 합니다.
Chart.js를 사용하면 차트를 그리기 위해 정리된 데이터 객체를 추출할 수 있습니다. 이 같은 데이터 조각은 테이블을 생성하는 데 유용합니다. 아래의 비디오에서 정확한 방법을 확인할 수 있습니다.
Chart.js에서 판매 퍼널 차트를 만드는 방법
Chart.js에서 판매 퍼널 차트를 생성하는 것은 가능합니다. 그러나 작동하려면 몇 가지 고급 플러그인 사용자 정의가 필요합니다. 우리가 이해해야 할 것은 막대를 퍼널로 변환하는 사용자 정의 모양을 그리는 방법입니다.
만약 고급 수준의 Chart.js에 도전하려면, 이 비디오는 좋은 도전이 될 것입니다. 이 비디오에서는 판매 퍼널을 추적하며 퍼널의 각 단계마다 데이터셋의 값에 따라 퍼널이 축소됩니다.
Chart.js에서 차트를 이미지로 저장하는 방법
차트나 캔버스를 이미지로 저장하고 다운로드하려면 약간의 작업이 필요합니다. 기본적으로 오른쪽 클릭하여 차트를 이미지로 다운로드하고 저장할 수 있습니다. 그러나 이것은 많은 사람들에게는 명확하지 않을 수 있으므로 특별한 다운로드 버튼을 만드는 것이 좋은 대안입니다.
Chart JS에서 버튼 클릭으로 캔버스를 이미지로 다운로드하는 방법.
아래 비디오에서는 이것을 어떻게 달성할 수 있는지 정확하게 보여줍니다. 우리는 캔버스를 PNG 파일로 변환하여 다운로드하고 기기에 저장하는 방법을 알려드릴 것입니다.
Skillshare 강좌 곧 출시 예정입니다!
저는 몇 개의 Skillshare 강좌를 진행 중이었습니다. Skillshare를 가입하고 옵션을 탐색하려는 경우 아래 링크를 클릭하여 Skillshare의 1주 무료 체험을 받을 수 있습니다. 이것은 제가 제공한 제휴 링크로, 가입하면 아무런 비용이 들지 않지만 무료 기간 동안 가입하면 저에게 수수료가 지급됩니다. 받은 수수료는 Chart.js 튜토리얼 및 연구 개발에 다시 투자될 것입니다:
Korean 
English 
Chinese 
French 
German 
Portuguese (Portugal) 
Portuguese (Brazil) 
Spanish 
Vietnamese