antvis/F2

모바일 최적화된 경량 데이터 시각화 라이브러리로, 그래픽 문법 기반 50+ 차트 유형을 지원합니다.

개발 재료맘대로 써도 됨 · MIT모바일난이도

7,989+0이번 주642303JavaScript

중간맛 분석

JavaScript 기반 데이터 시각화 라이브러리로, H5·웹 외에도 Node.js, 알리페이/위챗 미니프로그램, React Native, Weex를 지원합니다. gzip 기준 44KB(기본)~56KB(모든 상호작용 포함) 수준의 경량 코드로 50+ 차트 타입을 제공하며, 그래픽 문법 이론 기반으로 도형·애니메이션·상호작용을 커스터마이징할 수 있습니다. Canvas 기반 렌더링으로 모바일 성능 최적화되어 있고, npm install 후 바로 사용 가능합니다.

이런 레포예요

이럴 때 쓰면 좋아요

모바일 앱이나 미니프로그램에 실시간 판매량·통계 대시보드 삽입
반응형 웹사이트에서 차트 크기를 자동으로 조정하여 표시
Node.js 백엔드에서 서버사이드 이미지 생성 파이프라인 구축

핵심 기능

그래픽 문법 기반 유연한 차트 구성 (50+ 타입)모바일 전용 설계로 극도의 경량화 (44-56KB gzip)H5/미니프로그램/React Native/Weex 등 다중 플랫폼 지원

대안 대비 차별점

그래픽 문법 이론으로 특정 차트에 국한되지 않고 임의의 데이터 시각화를 만들 수 있으며, 일반 시각화 라이브러리 대비 모바일 성능과 다중 환경 호환성에 중점을 뒀습니다.

준비물

npm 또는 yarn
Canvas를 지원하는 브라우저 또는 Node.js 환경

바로 시작하기

npm으로 F2 패키지 설치

npm install @antv/f2

HTML에 canvas 요소 생성

<canvas id="mountNode"></canvas>

JavaScript에서 데이터 정의

const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

Canvas context를 가져오고 Chart 구성

const context = document.getElementById('mountNode').getContext('2d');
const { props } = (
  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
    <Chart data={data}>
      <Axis field="genre" />
      <Axis field="sold" />
      <Interval x="genre" y="sold" color="genre" />
      <Tooltip />
    </Chart>
  </Canvas>
);

Canvas 렌더링

const canvas = new Canvas(props);
canvas.render();

별 추이 · 7일

7,989+0 / 7일

활용성 · 따라 만들기 좋은가

샘플 점수 20/100

관대한 라이선스
테스트 있음
예제 디렉토리
최근 활동
AGENTS.md
llms.txt
템플릿

⚪ 최근 활동 정보 없음 · 2016년 생성

AI가 README 기반으로 요약했습니다 · 원문 보기