ChartBlock

문제와 해설 안의 그래프(선, 막대, 점)를 그린다. 함수 그래프는 교과서처럼 원점을 지나는 화살표 축으로, 자료 그래프는 격자와 눈금과 범례로 그린다.

이 페이지의 목차

미리보기#

실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.

함수 그래프. 미리보기의 그림은 실제 자료가 아니라 모양을 보여 주는 그림이다.

ChartBlock 종류
이름	설명
함수 그래프 (cartesian)	막대가 아니고, 범주축이 없고, 두 축의 범위가 0을 포함하며 단위가 없을 때. 원점을 지나는 화살표 축, 격자 없음, x · y · O 글자.
자료 그래프	그 밖의 모든 경우. 격자, 눈금, 단위, 범주, 막대, 범례.
kind	`line`(선), `bar`(막대), `scatter`(점).

ChartBlock 크기
이름	값	설명
기본	높이 = min(폭 × 0.64, 240)	`compact`는 폭 × 0.66.

ChartBlock 상태
상태	모습과 동작
시리즈 색	1번째 `primary`, 2번째 `danger`, 3번째 `mint`, 4번째 `amber`.
보조선·표시	`lines`(가로·세로 보조선)와 `marks`(강조점과 라벨)를 그린다.

import { ChartBlock } from '@/ui/blocks/ChartBlock';

<ChartBlock block={block} compact={inChoice} />

ChartBlock 속성
이름	타입	기본값	필수	설명
`block`	Chart	—	필수	그래프 블록(`{ t: "chart", kind, x, y, series, lines?, marks? }`). 축 `x`, `y`는 `{ label?, unit?, cats?, min, max }`.
`compact`	boolean	—	선택	`true`이면 보기 안에 들어가게 작게 그린다(글자 10, 높이 폭 × 0.66).

잘한 예단위와 라벨이 있는 자료 그래프에는 범례를 함께 쓴다.

값이 글에 없는 그래프

잘못한 예그래프의 값을 알아야 풀 수 있는 문제라면 값을 글로도 쓴다. 화면 읽기 프로그램은 점의 값을 읽지 못한다.

Blocks: 문제 본문, 보기, 해설을 이루는 블록(문단, 보기 상자, 수식, 표, 그래프, 그림)을 위에서 아래로 그린다. RichText는 그중 문단 하나다.
DiagramBlock: 선, 도형, 글자, 회로 부품(저항, 전지, 전구, 스위치), 스프링 같은 기본 모양으로 만든 도식을 그린다. 컨테이너 폭에 맞게 줄어든다.
HourBars: 값 축이 있는 막대 차트다. 학습 시간(시간·분)이나 푼 문제 수를 날짜별로 보여 주고, 고른 막대 위에 말풍선이 뜬다.