프로젝트 의 JavaScript 스킬 트리

Echarts 와 JSON 을 활용한 데이터 시각화

초급

본 프로젝트에서는 JSON 파일에서 데이터를 가져와 다양한 음식의 단백질 함량을 렌더링하고, Echarts 파이 차트를 생성하여 데이터를 시각화하는 방법을 배웁니다. 이 프로젝트는 JavaScript 를 사용하여 데이터 조작 및 데이터 시각화 작업을 직접 경험할 수 있도록 돕는 것을 목표로 합니다.

javascriptweb-development

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

소개

이 프로젝트에서는 JSON 파일에서 데이터를 가져와 다양한 음식의 단백질 함량을 렌더링하고, Echarts 파이 차트를 생성하여 데이터를 시각화하는 방법을 배우게 됩니다. 이 프로젝트는 JavaScript 를 사용하여 데이터 조작 및 데이터 시각화 작업을 직접 경험할 수 있도록 하는 것을 목표로 합니다.

👀 미리보기

Echarts protein pie chart

🎯 과제

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

  • Fetch API 를 사용하여 JSON 파일에서 데이터를 가져오는 방법
  • 웹 페이지에서 다양한 음식의 단백질 함량을 렌더링하는 방법
  • 단백질 함량 데이터를 시각화하기 위해 Echarts 파이 차트를 생성하는 방법

🏆 성과

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

  • JSON 파일에서 데이터를 가져와 처리
  • 가져온 데이터를 기반으로 HTML 요소를 동적으로 렌더링
  • Echarts 라이브러리를 사용하여 대화형 파이 차트 생성
  • 데이터 시각화를 웹 애플리케이션에 통합

강사

labby
Labby
Labby is the LabEx teacher.