차트 만들기

01 · DATA

첫 행은 계열 이름, 첫 열은 항목이에요. 엑셀에서 복사해 아무 칸에나 붙여넣어도 돼요.

1200 × 675

02 · STYLE

제목 부제 · 설명

X축 이름 Y축 이름

출처 · 메모 (아래 작게)

팔레트

배경

표시 범례

단위 앞 단위 뒤

Y축 시작 원 계열 막대 모서리

크기 · 글꼴

가로 px 세로 px

글꼴 저장할 때 글꼴 포함 (인터넷 연결 필요)

데이터는 이 브라우저에만 자동 저장되고 서버로 보내지 않아요.

사용 방법

위에서 막대·누적 막대·가로 막대·선·영역·원·도넛 중 차트 종류를 골라요.

왼쪽 표에 데이터를 넣거나 엑셀·구글 시트에서 복사해 아무 칸에 붙여넣어요. 첫 행은 계열 이름, 첫 열은 항목이고 'CSV 열기'도 돼요.

오른쪽에서 제목·축 이름·범례·값 라벨·단위와 팔레트·배경·크기·글꼴을 정해요.

'SVG 저장'이나 'PNG 저장'(2배 해상도)으로 이미지를 받아요.

자주 묻는 질문

색맹(색각 이상)인 사람도 구분하기 쉬운 색이 있나요?

'기본 · 색맹 배려'와 'Okabe-Ito' 팔레트를 쓰세요. 기본 팔레트는 이웃한 색끼리 색각 이상 시뮬레이션에서도 구분되도록 순서를 맞췄어요. 계열이 8개를 넘으면 색이 반복되니 묶거나 차트를 나누는 게 좋고, 범례와 값 라벨을 함께 켜 두면 색만으로 구분하지 않아도 돼요.

원·도넛 차트에 계열이 여러 개면 어떻게 돼요?

원과 도넛은 계열 하나만 그려요. 오른쪽 '원 계열'에서 그릴 계열을 고르세요. 빈칸과 음수는 0으로 보고, 비율이 4.5% 미만인 조각은 라벨을 생략해요. '퍼센트로'를 끄면 라벨에 값이 그대로 나와요.

저장한 이미지의 글꼴이 화면과 달라요.

'저장할 때 글꼴 포함'을 켜 두면 차트에 쓰인 글자가 들어 있는 글꼴 조각만 Google Fonts에서 받아 SVG·PNG 안에 넣어요. 인터넷에 연결되지 않았거나 받아오지 못하면 기기에 설치된 글꼴로 대신 그려져요. 글꼴은 모두 상업적으로 쓸 수 있는 SIL OFL 글꼴이에요.

입력한 데이터가 서버로 가나요?

아니요. 차트는 브라우저 안에서 SVG로 직접 그리고, 표 내용과 설정은 이 브라우저에만 저장돼요. 글꼴을 포함해 저장할 때 Google Fonts에서 글꼴 파일을 받아오는 것 말고는 외부로 나가는 요청이 없어요.

사용 방법

같이 쓰기 좋은 도구

자주 묻는 질문