echarts-with-react
정보
이 스킬은 차트 초기화, 옵션 업데이트 및 반응형 크기 조정을 처리하는 ECharts용 React 컴포넌트 래퍼를 제공합니다. 자동화된 생명주기 관리가 필요한 React 애플리케이션에 ECharts 시각화를 통합하는 개발자에게 이상적입니다. 이 컴포넌트는 적절한 차트 관리를 위해 언마운트 시 정리 작업과 창 크기 조정 리스너를 포함합니다.
빠른 설치
Claude Code
추천npx skills add vamseeachanta/workspace-hub -a claude-code/plugin add https://github.com/vamseeachanta/workspace-hubgit clone https://github.com/vamseeachanta/workspace-hub.git ~/.claude/skills/echarts-with-reactClaude Code에서 이 명령을 복사하여 붙여넣어 스킬을 설치하세요
GitHub 저장소
연관 스킬
d3js
기타이 스킬은 개발자들이 D3.js를 사용하여 완전히 사용자 정의된 인터랙티브 데이터 시각화를 만들 수 있게 해주며, SVG 요소와 데이터 바인딩에 대한 완전한 제어권을 제공합니다. 표준 라이브러리로는 구현할 수 없는 정교한 전환 효과와 상호작용을 갖춘 독특하고 복잡한 차트를 구축하는 데 이상적입니다. 단순한 사전 스타일링된 차트가 아닌 맞춤형 데이터 기반 시각화가 필요할 때 사용하세요.
plotly-vertical-legends-avoid-toolbar-clash
기타이 스킬은 범례를 수평 툴바와 겹치지 않도록 오른쪽에 세로로 배치하는 Plotly 레이아웃 구성을 제공합니다. 여기에는 범례에 충분한 공간을 보장하기 위한 특정 여백 조정과 간결한 스타일링이 포함됩니다. 또한 이 스킬은 다중 데이터셋 플롯에서 범례 항목을 논리적으로 그룹화하기 위한 트레이스 순서 지정 전략을 권장합니다.
chartjs-chartjs-zoom-plugin
기타이 스킬은 chartjs-plugin-zoom을 통해 Chart.js 시각화에 확대/축소 및 패닝 기능을 제공합니다. 사용자는 차트에서 드래그하여 화면을 이동하고, 스크롤하여 확대/축소하는 방식으로 상세 데이터 영역을 대화형으로 탐색할 수 있습니다. 개발자는 Chart.js 그래프에 인터랙티브 데이터 탐색 기능을 추가해야 할 때 이 기능을 사용해야 합니다.
plotly-with-pandas
기타이 스킬은 데이터프레임에서 간소화된 데이터 시각화를 위해 Pandas와 Plotly 통합을 제공합니다. CSV 데이터에서 직접 플롯을 생성할 수 있으며, 수학적 시각화를 위한 NumPy 호환성을 포함합니다. 대화형 차트가 필요한 Jupyter 환경에서 표 형식 데이터를 작업할 때 사용하세요.