사용 가이드로 건너뛰기
AntV G2 Chart작성자 antvis

AntV G2 Chart 스킬.

다른 차트 라이브러리의 문법을 섞지 말고 G2 v5 문법을 의도적으로 사용하세요.

  • Data Visualization
  • 차트
  • JavaScript
소스 검토 · AntV G2 ChartSKILL.md
작업 Data Visualization 결과물 • 컨테이너와 렌더 설정을 포함한 완전한 G2 v5 차트 스펙. • 수정된 마크, 인코딩, 트랜스폼, 구성 선택. • 레이블, 색상 의미, 툴팁, 데이터 의미에 대한 차트별 검토. 시작하기 전에 @antv/g2 v5 또는 문서에 안내된 브라우저 번들이 필요합니다. 선택적인 참조 검색은 외부 AntV 컨텍스트 서비스를 사용합니다.
편집 요약 · 소스 검토일 2026-10-07 · 생성된 예시 아님

01 기능 소개

G2 v5 스펙 모드로 차트 작성하기

선언형 스펙 규칙, 대상 지정 참조 검색, 흔한 오류 방지, 데이터를 고려한 시각적 선택을 결합한 G2 v5 구현 가이드입니다.

소스 기반 워크플로실행 벤치마크 아님

작업 방식

AntV G2 Chart은 @antv/g2 v5를 사용한 차트 구현에 초점을 둡니다. 생성되는 예시는 완전한 선언형 스펙에서 시작하며, 컨테이너 누락, 잘못된 마크 이름, 단수형 레이블 속성, 잘못된 위치의 트랜스폼 같은 흔한 실패 지점을 다룹니다. 또한 특정 G2 개념과 예시를 찾기 위한 문서 검색 엔드포인트도 제공합니다.

소스는 다중 마크 구성에 대해 특히 명확합니다. 선과 점은 루트 타입을 반복해서 바꾸는 방식이 아니라 view의 children 안에 넣어야 합니다. 시각적 가이드는 엔진의 기본값과 스킬이 선택한 재정의를 구분하며, 단위, 출처 레이블, 제목은 의미를 알 때만 추가하도록 요구합니다. 그래프, 다이어그램 편집기, 피벗 테이블을 위한 범용 AntV 도구는 아닙니다.

예상 결과물

  • 컨테이너와 렌더 설정을 포함한 완전한 G2 v5 차트 스펙.
  • 수정된 마크, 인코딩, 트랜스폼, 구성 선택.
  • 레이블, 색상 의미, 툴팁, 데이터 의미에 대한 차트별 검토.
예시 브리프 보기

브리프에서 검토까지

  1. 01
    데이터와 의도 파악

    누락된 의미를 지어내지 않고 필드, 단위, 비교 요구, 차트가 답할 질문을 확인합니다.

  2. 02
    관련 참조 검색

    API 또는 차트 유형 세부 정보를 확인해야 할 때 문서화된 G2 검색 서비스를 사용합니다.

  3. 03
    완전한 스펙 작성

    유효한 마크와 채널을 고르고, 트랜스폼 배열을 사용하며, view 안에서 오버레이를 구성합니다.

  4. 04
    렌더링 및 검토

    대상 컨테이너에서 실제 마크, 레이블, 범례, 테마, 고밀도 데이터 동작을 확인합니다.

02 활용 상황

사용 시기

@antv/g2 v5 또는 문서에 안내된 브라우저 번들이 필요합니다. 선택적인 참조 검색은 외부 AntV 컨텍스트 서비스를 사용합니다.

적합한 경우

  • G2 v5 구현라이브러리의 선언형 스펙 방식으로 차트를 만들 때 유용합니다.
  • 마이그레이션과 디버깅이전 G2 사용법이나 다른 시각화 문법에서 가져온 구문을 찾는 데 도움이 됩니다.
  • 다중 마크 차트독립적인 오버레이를 어떻게 구성해야 하는지 명확히 합니다.

확인할 한계

  • 모든 AntV 라이브러리용은 아님G6 네트워크, X6 다이어그램, S2 피벗 테이블은 명시된 범위 밖입니다.
  • 렌더링은 데이터 검증이 아님올바르게 렌더링된다고 해서 데이터, 집계 또는 해석이 타당하다는 뜻은 아닙니다.
  • 참조에는 네트워크 접근이 필요문서화된 검색 엔드포인트는 외부 서비스이므로 사용할 때 가용성을 확인해야 합니다.

준비할 입력

  • 데이터셋과 필드 의미실제 값, 타입, 단위, 허용되는 집계를 제공하세요.
  • 시각화 질문차트가 무엇을 비교하거나 보여줘야 하는지 설명하세요.
  • 런타임 환경G2 버전, 컨테이너, 테마, 인터랙션 요구사항을 명시하세요.

03 핵심 결정

중요한 결정

  1. 완전한 초기 스펙

    완전한 스펙은 부분적인 루트 변경을 이어 붙이는 것보다 생성된 차트를 이해하기 쉽게 합니다.

  2. 의미 있는 색상

    색상은 의미 있는 그룹이나 상태를 나타내야 하며, 단일 시리즈 비교에 무지개색을 더해서는 안 됩니다.

  3. 기본값과 재정의는 다름

    소스는 선택한 반경, 너비, 불투명도 값과 그것이 재정의하는 엔진 동작을 구분합니다.

04 예시 브리프

집중된 브리프 시도하기

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

설정 검토

저장소에서 지원하는 경로로 스킬을 설치하고, 필요에 따라 대상 애플리케이션에 @antv/g2를 추가하세요. 차트 패키지와 에이전트 스킬은 별개의 의존성입니다.

업스트림 소스 파일
https://github.com/antvis/chart-visualization-skills/blob/a105fa12a9fa41fccccc2eba7f4b34973628f5d3/skills/antv-g2-chart/SKILL.md

@antv/g2 v5 또는 문서에 안내된 브라우저 번들이 필요합니다. 선택적인 참조 검색은 외부 AntV 컨텍스트 서비스를 사용합니다.

하나의 결과물로 시작

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 조건을 조정하세요.

예시 브리프
antv-g2-chart을 사용해 제공된 월별 매출 데이터로 G2 v5 차트를 만드세요. view와 children으로 선과 점을 오버레이하고, 제공된 통화 단위를 유지하며, 명시적인 컨테이너와 render 호출이 있는 완전한 초기 스펙을 사용하세요. 중복되는 색상 범례는 피하고, 레이블을 추가하기 전에 밀집된 레이블을 확인하세요.

결과 점검

실제 출력을 다음의 관찰 가능한 기준과 비교해 확인하세요.

  • 차트에 명시적인 컨테이너와 render 호출이 있습니다.
  • 오버레이 마크가 view의 독립적인 children으로 구성되어 있습니다.
  • 레이블, 단위, 색상 인코딩이 제공된 데이터의 의미와 일치합니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 작업 공간을 제공합니다. 이 목록은 해당 스킬이 번들로 포함되어 있다거나 외부 도구, 자격 증명, 소프트웨어 의존성이 포함되어 있다는 뜻이 아닙니다.

05 출처 및 라이선스

소스 및 라이선스

이 페이지는 아래에 링크된 고정된 소스 리비전을 설명합니다. 업스트림의 동작과 요구사항은 변경될 수 있습니다.

소스 소유자
antvis
라이선스
MIT
검토된 스냅샷
2026-10-07 · a105fa12a9fa
편집 소스 요약
선언형 스펙 규칙, 대상 지정 참조 검색, 흔한 오류 방지, 데이터를 고려한 시각적 선택을 결합한 G2 v5 구현 가이드입니다.

링크된 소스를 바탕으로 OpenDesign이 직접 작성한 요약입니다. 저장소 스타는 날짜 기준의 인기 신호이며 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 질문

루트 type을 두 번 바꿔서 마크를 오버레이할 수 있나요?

소스는 안 된다고 말합니다. 그렇게 하면 독립적인 오버레이가 만들어지지 않고 루트 마크가 갱신됩니다. children이 있는 view를 사용하세요.

G6 네트워크 다이어그램도 다루나요?

아니요. 소스는 이 G2 차트 스킬에서 G6, X6, S2 작업을 명시적으로 제외합니다.

제안된 스타일 값은 G2 엔진 기본값인가요?

모두 그런 것은 아닙니다. 소스는 권장하는 명시적 재정의와 엔진 자체의 기본값을 구분합니다.

OpenDesign

다음 디자인 반복을 위한 공간을 마련하세요.

브리프, 소스 자료, 디자인 작업을 로컬 작업 공간에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

업스트림 소스 파일
https://github.com/antvis/chart-visualization-skills/blob/a105fa12a9fa41fccccc2eba7f4b34973628f5d3/skills/antv-g2-chart/SKILL.md