프로젝트 의 JavaScript 스킬 트리

ECharts 로 인터랙티브 막대 차트 만들기

초급

이 프로젝트에서는 ECharts JavaScript 라이브러리를 사용하여 학생 성적 통계를 표시하는 막대 차트를 만드는 방법을 배웁니다. ECharts 는 데이터를 시각적으로 표현하고 상호 작용할 수 있는 매력적인 차트를 생성하는 데 도움이 되는 강력한 데이터 시각화 도구입니다.

javascriptweb-development

💡 이 튜토리얼은 영어로 번역되었습니다. 원본을 보려면 영어로 전환

소개

이 프로젝트에서는 ECharts JavaScript 라이브러리를 사용하여 학생 성취도 통계를 표시하는 막대 차트를 만드는 방법을 배우게 됩니다. ECharts 는 데이터를 시각적으로 표현하기 위한 강력한 도구로, 데이터를 시각적으로 매력적이고 상호 작용 가능한 차트로 만들어 데이터를 제시하는 데 도움이 됩니다.

👀 미리보기

Image Description

🎯 과제

이 프로젝트에서는 다음을 배우게 됩니다:

  • 차트를 올바르게 표시하기 위해 초기 코드의 오류를 수정하는 방법
  • 차트가 올바른 방향으로 표시되도록 x 축 및 y 축 설정을 수정하는 방법
  • x 축 레이블의 순서에 맞게 시리즈의 데이터를 조정하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

  • ECharts 인스턴스를 초기화하고 차트 옵션을 구성합니다.
  • 차트의 모양을 제어하기 위해 x 축 및 y 축 속성을 정의합니다.
  • 원하는 시각화에 맞게 시리즈의 데이터를 업데이트합니다.

강사

labby
Labby
Labby is the LabEx teacher.