Open MarkLeemee opened 1 year ago
(갯수가 많아질 경우 chart의 크기가 줄어든다.) (middle로 설정한 상태. chart의 위치와 크기와는 별개로 그냥 노출시킨다.)
import {PieChart, XAxis, YAxis, Tooltip, Area, ... } from 'rechart' <PieChart {...option} > <XAxis ... /> <YAxis ... /> <Tooltip ... /> <Area ... /> <Bar .../> // ... </ Chart>
const configObj = { data: [...fetchData], angleField: 'value', radius: 1, innerRadius: 0.6, label: { type: 'inner', offset: '-50%', content: '{value}', style: { textAlign: 'center', fontSize: 14, // ... }, // ... }, tooltip: { // ... }, interactions: [ { type: 'element-selected', // ... }, // ... ], statistic: { title: false, content: 'AntV\nG2Plot', content: { style: { whiteSpace: 'pre-wrap', overflow: 'hidden', textOverflow: 'ellipsis', // .... }, // ... }, // ... }, // ... };
<PieChart {...configObj} />
구현 사항
추가 논의 필요 사항
1. legend의 위치 및 list가 과하게 많은 경우
1-1. 덮어 씌기 + 전체 다 노출 (rechart 방식)
(갯수가 많아질 경우 chart의 크기가 줄어든다.) (middle로 설정한 상태. chart의 위치와 크기와는 별개로 그냥 노출시킨다.)
1-2. pagination 혹은 scroll
2. 기본 architecture 구현 방식
2-1. legend, tooltip 등 react component를 만들어서 필요한 state를 구현하여 전달하는 방식 (예전 방식)
2-2. 기본(default) element와 styled만 구현 후, 설정이나 인터렉션이 필요한 경우 d3 selection으로 접근하여 컨트롤 (현 코드 방식)
2-3. 최초 box(혹은 svg)만 구성 후 나머지 요소들은 생성하여 appending 하는 방식 (기본 라이브러리 방식들)
3.props 전달 방식
3-1. 각개 props 형식
3-2. Object 형식
<PieChart {...configObj} />