소개
이 프로젝트에서는 ECharts JavaScript 라이브러리를 사용하여 학생 성취도 통계를 표시하는 막대 차트를 만드는 방법을 배우게 됩니다. ECharts 는 데이터를 시각적으로 표현하기 위한 강력한 도구로, 데이터를 시각적으로 매력적이고 상호 작용 가능한 차트로 만들어 데이터를 제시하는 데 도움이 됩니다.
👀 미리보기
🎯 과제
이 프로젝트에서는 다음을 배우게 됩니다:
- 차트를 올바르게 표시하기 위해 초기 코드의 오류를 수정하는 방법
- 차트가 올바른 방향으로 표시되도록 x 축 및 y 축 설정을 수정하는 방법
- x 축 레이블의 순서에 맞게 시리즈의 데이터를 조정하는 방법
🏆 성과
이 프로젝트를 완료하면 다음을 수행할 수 있습니다:
- ECharts 인스턴스를 초기화하고 차트 옵션을 구성합니다.
- 차트의 모양을 제어하기 위해 x 축 및 y 축 속성을 정의합니다.
- 원하는 시각화에 맞게 시리즈의 데이터를 업데이트합니다.
프로젝트 구조 설정
이 단계에서는 프로젝트 구조를 설정하고 필요한 파일과 폴더를 준비합니다.
코드 편집기에서 프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다.
├── echarts.js
└── index.html
여기서:
index.html은 메인 페이지입니다.js/echarts.js는 ECharts 파일입니다.
WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
다음으로, VM 상단의 "Web 8080"을 열고 페이지를 수동으로 새로 고치면 페이지가 비어 있는 것을 확인할 수 있습니다. 이 때 콘솔을 열면 다음과 같은 오류 메시지가 표시됩니다.
오류 수정
이 단계에서는 차트를 표시할 수 있도록 프로젝트의 오류를 수정하는 방법을 배웁니다.
- 제공된 프로젝트에서
index.html파일을 엽니다. - script 태그의 코드에서 정의되지 않은 x 축이 발견되었습니다. echarts 차트에서는 데이터 유무에 관계없이 x 축과 y 축을 모두 정의해야 합니다. 따라서 TODO 내의
var option = {...};아래 코드에 다음과 같은 변경을 했습니다.
// TODO
// xAxis
xAxis: {
data: ["Tom", "Tony", "Lucas", "Lucy", "Anna", "Kevin"]
},
// yAxis
yAxis: {},
series: [
{
name: "grades",
type: "bar",
data: [55, 90, 65, 70, 80, 63]
}
]
이렇게 하면 오류가 수정되고 차트가 표시됩니다.
- 변경 사항을 저장하고 페이지를 다시 로드하여 차트를 확인합니다.
요약
축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.
