Graflume · Alpha

Calendar

날짜별 강도와 계절성, 비어 있는 기간을 달력 격자로 탐색합니다.

차트 계열 · 기본 차트 계열

Calendar

날짜별 강도와 계절성, 비어 있는 기간을 달력 격자로 탐색합니다.

Quick API
calendar()
브라우저 스냅샷
graflume
mark
calendar
프리셋
1

기본 구현

가장 단순한 차트

필수 데이터와 차트 고유 인코딩만 사용한 출발점입니다. 아래 코드를 펼치면 그대로 실행할 수 있습니다.

기본 예제

날짜별 강도와 계절성, 비어 있는 기간을 달력 격자로 탐색합니다.

상태불러오는 중

  • minimal-implementation
Graflume.calendar() Canvas 2D
조작 도움말

확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.

Tab으로 조작부를 이동하고 Enter 또는 Space로 실행하세요. 차트에 초점이 있을 때 더하기·빼기 키로 확대·축소하고 화살표 키로 이동할 수 있습니다.

자동 배치는 둘레 후보를 비교해 차트·범례·다른 말풍선과의 겹침을 가능한 한 피합니다. 명시한 위치는 필요한 안전 보정만 적용해 유지합니다. 말풍선 글자는 상자 안에서 안전하게 자동 줄바꿈됩니다. 끊어지지 않는 긴 토큰은 정해진 줄 수 안에서 시각적으로 축약하지만, 보조 기술에는 원문 전체를 유지합니다.

불러오는 중

브라우저 API · 이식 가능한 스키마

브라우저 API

Graflume.calendar()

const data = [
  {
    "date": "2025-01-01",
    "value": 59
  },
  {
    "date": "2025-01-02",
    "value": 60
  },
  {
    "date": "2025-01-03",
    "value": 61
  },
  {
    "date": "2025-01-04",
    "value": 45
  },
  {
    "date": "2025-01-05",
    "value": 46
  },
  {
    "date": "2025-01-06",
    "value": 64
  },
  {
    "date": "2025-01-07",
    "value": 65
  },
  {
    "date": "2025-01-08",
    "value": 65
  },
  {
    "date": "2025-01-09",
    "value": 66
  },
  {
    "date": "2025-01-10",
    "value": 67
  },
  {
    "date": "2025-01-11",
    "value": 51
  },
  {
    "date": "2025-01-12",
    "value": 51
  },
  {
    "date": "2025-01-13",
    "value": 69
  },
  {
    "date": "2025-01-14",
    "value": 70
  },
  {
    "date": "2025-01-15",
    "value": 70
  },
  {
    "date": "2025-01-16",
    "value": 70
  },
  {
    "date": "2025-01-17",
    "value": 71
  },
  {
    "date": "2025-01-18",
    "value": 54
  },
  {
    "date": "2025-01-19",
    "value": 54
  },
  {
    "date": "2025-01-20",
    "value": 71
  },
  {
    "date": "2025-01-21",
    "value": 71
  },
  {
    "date": "2025-01-22",
    "value": 71
  },
  {
    "date": "2025-01-23",
    "value": 71
  },
  {
    "date": "2025-01-24",
    "value": 71
  },
  {
    "date": "2025-01-25",
    "value": 54
  },
  {
    "date": "2025-01-26",
    "value": 53
  },
  {
    "date": "2025-01-27",
    "value": 70
  },
  {
    "date": "2025-01-28",
    "value": 70
  },
  {
    "date": "2025-01-29",
    "value": 69
  },
  {
    "date": "2025-01-30",
    "value": 68
  },
  {
    "date": "2025-01-31",
    "value": 68
  },
  {
    "date": "2025-02-01",
    "value": 50
  },
  {
    "date": "2025-02-02",
    "value": 49
  },
  {
    "date": "2025-02-03",
    "value": 65
  },
  {
    "date": "2025-02-04",
    "value": 65
  },
  {
    "date": "2025-02-05",
    "value": 64
  },
  {
    "date": "2025-02-06",
    "value": 63
  },
  {
    "date": "2025-02-07",
    "value": 62
  },
  {
    "date": "2025-02-08",
    "value": 44
  },
  {
    "date": "2025-02-09",
    "value": 43
  },
  {
    "date": "2025-02-10",
    "value": 59
  },
  {
    "date": "2025-02-11",
    "value": 57
  },
  {
    "date": "2025-02-12",
    "value": 56
  },
  {
    "date": "2025-02-13",
    "value": 55
  },
  {
    "date": "2025-02-14",
    "value": 54
  },
  {
    "date": "2025-02-15",
    "value": 36
  },
  {
    "date": "2025-02-16",
    "value": 35
  },
  {
    "date": "2025-02-17",
    "value": 51
  },
  {
    "date": "2025-02-18",
    "value": 50
  },
  {
    "date": "2025-02-19",
    "value": 49
  },
  {
    "date": "2025-02-20",
    "value": 48
  },
  {
    "date": "2025-02-21",
    "value": 47
  },
  {
    "date": "2025-02-22",
    "value": 29
  },
  {
    "date": "2025-02-23",
    "value": 28
  },
  {
    "date": "2025-02-24",
    "value": 45
  },
  {
    "date": "2025-02-25",
    "value": 44
  },
  {
    "date": "2025-02-26",
    "value": 43
  },
  {
    "date": "2025-02-27",
    "value": 43
  },
  {
    "date": "2025-02-28",
    "value": 42
  },
  {
    "date": "2025-03-01",
    "value": 25
  },
  {
    "date": "2025-03-02",
    "value": 24
  },
  {
    "date": "2025-03-03",
    "value": 41
  },
  {
    "date": "2025-03-04",
    "value": 41
  },
  {
    "date": "2025-03-05",
    "value": 41
  },
  {
    "date": "2025-03-06",
    "value": 41
  },
  {
    "date": "2025-03-07",
    "value": 41
  },
  {
    "date": "2025-03-08",
    "value": 24
  },
  {
    "date": "2025-03-09",
    "value": 24
  },
  {
    "date": "2025-03-10",
    "value": 41
  },
  {
    "date": "2025-03-11",
    "value": 41
  },
  {
    "date": "2025-03-12",
    "value": 42
  },
  {
    "date": "2025-03-13",
    "value": 42
  },
  {
    "date": "2025-03-14",
    "value": 42
  },
  {
    "date": "2025-03-15",
    "value": 26
  },
  {
    "date": "2025-03-16",
    "value": 26
  },
  {
    "date": "2025-03-17",
    "value": 44
  },
  {
    "date": "2025-03-18",
    "value": 45
  },
  {
    "date": "2025-03-19",
    "value": 45
  },
  {
    "date": "2025-03-20",
    "value": 46
  },
  {
    "date": "2025-03-21",
    "value": 47
  },
  {
    "date": "2025-03-22",
    "value": 31
  },
  {
    "date": "2025-03-23",
    "value": 31
  },
  {
    "date": "2025-03-24",
    "value": 49
  },
  {
    "date": "2025-03-25",
    "value": 50
  },
  {
    "date": "2025-03-26",
    "value": 51
  },
  {
    "date": "2025-03-27",
    "value": 52
  },
  {
    "date": "2025-03-28",
    "value": 53
  },
  {
    "date": "2025-03-29",
    "value": 36
  },
  {
    "date": "2025-03-30",
    "value": 37
  },
  {
    "date": "2025-03-31",
    "value": 55
  },
  {
    "date": "2025-04-01",
    "value": 56
  },
  {
    "date": "2025-04-02",
    "value": 56
  },
  {
    "date": "2025-04-03",
    "value": 57
  },
  {
    "date": "2025-04-04",
    "value": 58
  },
  {
    "date": "2025-04-05",
    "value": 41
  },
  {
    "date": "2025-04-06",
    "value": 42
  },
  {
    "date": "2025-04-07",
    "value": 59
  },
  {
    "date": "2025-04-08",
    "value": 60
  },
  {
    "date": "2025-04-09",
    "value": 60
  },
  {
    "date": "2025-04-10",
    "value": 60
  },
  {
    "date": "2025-04-11",
    "value": 61
  },
  {
    "date": "2025-04-12",
    "value": 44
  },
  {
    "date": "2025-04-13",
    "value": 44
  },
  {
    "date": "2025-04-14",
    "value": 61
  },
  {
    "date": "2025-04-15",
    "value": 61
  },
  {
    "date": "2025-04-16",
    "value": 61
  },
  {
    "date": "2025-04-17",
    "value": 61
  },
  {
    "date": "2025-04-18",
    "value": 60
  },
  {
    "date": "2025-04-19",
    "value": 43
  },
  {
    "date": "2025-04-20",
    "value": 43
  },
  {
    "date": "2025-04-21",
    "value": 59
  },
  {
    "date": "2025-04-22",
    "value": 59
  },
  {
    "date": "2025-04-23",
    "value": 58
  },
  {
    "date": "2025-04-24",
    "value": 58
  },
  {
    "date": "2025-04-25",
    "value": 57
  },
  {
    "date": "2025-04-26",
    "value": 39
  },
  {
    "date": "2025-04-27",
    "value": 38
  },
  {
    "date": "2025-04-28",
    "value": 54
  },
  {
    "date": "2025-04-29",
    "value": 54
  },
  {
    "date": "2025-04-30",
    "value": 53
  },
  {
    "date": "2025-05-01",
    "value": 52
  },
  {
    "date": "2025-05-02",
    "value": 51
  },
  {
    "date": "2025-05-03",
    "value": 33
  },
  {
    "date": "2025-05-04",
    "value": 32
  },
  {
    "date": "2025-05-05",
    "value": 48
  },
  {
    "date": "2025-05-06",
    "value": 47
  },
  {
    "date": "2025-05-07",
    "value": 46
  },
  {
    "date": "2025-05-08",
    "value": 44
  },
  {
    "date": "2025-05-09",
    "value": 43
  },
  {
    "date": "2025-05-10",
    "value": 25
  },
  {
    "date": "2025-05-11",
    "value": 24
  },
  {
    "date": "2025-05-12",
    "value": 40
  },
  {
    "date": "2025-05-13",
    "value": 40
  },
  {
    "date": "2025-05-14",
    "value": 39
  },
  {
    "date": "2025-05-15",
    "value": 38
  },
  {
    "date": "2025-05-16",
    "value": 37
  },
  {
    "date": "2025-05-17",
    "value": 19
  },
  {
    "date": "2025-05-18",
    "value": 18
  },
  {
    "date": "2025-05-19",
    "value": 35
  },
  {
    "date": "2025-05-20",
    "value": 34
  },
  {
    "date": "2025-05-21",
    "value": 34
  },
  {
    "date": "2025-05-22",
    "value": 33
  },
  {
    "date": "2025-05-23",
    "value": 33
  },
  {
    "date": "2025-05-24",
    "value": 16
  },
  {
    "date": "2025-05-25",
    "value": 15
  },
  {
    "date": "2025-05-26",
    "value": 32
  },
  {
    "date": "2025-05-27",
    "value": 32
  },
  {
    "date": "2025-05-28",
    "value": 32
  },
  {
    "date": "2025-05-29",
    "value": 32
  },
  {
    "date": "2025-05-30",
    "value": 32
  },
  {
    "date": "2025-05-31",
    "value": 15
  },
  {
    "date": "2025-06-01",
    "value": 16
  },
  {
    "date": "2025-06-02",
    "value": 33
  },
  {
    "date": "2025-06-03",
    "value": 33
  },
  {
    "date": "2025-06-04",
    "value": 34
  },
  {
    "date": "2025-06-05",
    "value": 35
  },
  {
    "date": "2025-06-06",
    "value": 35
  },
  {
    "date": "2025-06-07",
    "value": 19
  },
  {
    "date": "2025-06-08",
    "value": 20
  },
  {
    "date": "2025-06-09",
    "value": 37
  },
  {
    "date": "2025-06-10",
    "value": 38
  },
  {
    "date": "2025-06-11",
    "value": 39
  },
  {
    "date": "2025-06-12",
    "value": 40
  },
  {
    "date": "2025-06-13",
    "value": 41
  },
  {
    "date": "2025-06-14",
    "value": 25
  },
  {
    "date": "2025-06-15",
    "value": 26
  },
  {
    "date": "2025-06-16",
    "value": 44
  },
  {
    "date": "2025-06-17",
    "value": 45
  },
  {
    "date": "2025-06-18",
    "value": 46
  },
  {
    "date": "2025-06-19",
    "value": 47
  },
  {
    "date": "2025-06-20",
    "value": 48
  },
  {
    "date": "2025-06-21",
    "value": 32
  },
  {
    "date": "2025-06-22",
    "value": 33
  },
  {
    "date": "2025-06-23",
    "value": 51
  },
  {
    "date": "2025-06-24",
    "value": 52
  },
  {
    "date": "2025-06-25",
    "value": 53
  },
  {
    "date": "2025-06-26",
    "value": 54
  },
  {
    "date": "2025-06-27",
    "value": 55
  },
  {
    "date": "2025-06-28",
    "value": 38
  },
  {
    "date": "2025-06-29",
    "value": 39
  },
  {
    "date": "2025-06-30",
    "value": 57
  },
  {
    "date": "2025-07-01",
    "value": 57
  },
  {
    "date": "2025-07-02",
    "value": 58
  },
  {
    "date": "2025-07-03",
    "value": 59
  },
  {
    "date": "2025-07-04",
    "value": 59
  },
  {
    "date": "2025-07-05",
    "value": 42
  },
  {
    "date": "2025-07-06",
    "value": 43
  },
  {
    "date": "2025-07-07",
    "value": 60
  },
  {
    "date": "2025-07-08",
    "value": 60
  },
  {
    "date": "2025-07-09",
    "value": 60
  },
  {
    "date": "2025-07-10",
    "value": 60
  },
  {
    "date": "2025-07-11",
    "value": 60
  },
  {
    "date": "2025-07-12",
    "value": 43
  },
  {
    "date": "2025-07-13",
    "value": 43
  },
  {
    "date": "2025-07-14",
    "value": 60
  },
  {
    "date": "2025-07-15",
    "value": 59
  },
  {
    "date": "2025-07-16",
    "value": 59
  },
  {
    "date": "2025-07-17",
    "value": 59
  },
  {
    "date": "2025-07-18",
    "value": 58
  },
  {
    "date": "2025-07-19",
    "value": 41
  },
  {
    "date": "2025-07-20",
    "value": 40
  },
  {
    "date": "2025-07-21",
    "value": 56
  },
  {
    "date": "2025-07-22",
    "value": 56
  },
  {
    "date": "2025-07-23",
    "value": 55
  },
  {
    "date": "2025-07-24",
    "value": 54
  },
  {
    "date": "2025-07-25",
    "value": 53
  },
  {
    "date": "2025-07-26",
    "value": 36
  },
  {
    "date": "2025-07-27",
    "value": 35
  },
  {
    "date": "2025-07-28",
    "value": 51
  },
  {
    "date": "2025-07-29",
    "value": 50
  },
  {
    "date": "2025-07-30",
    "value": 49
  },
  {
    "date": "2025-07-31",
    "value": 49
  },
  {
    "date": "2025-08-01",
    "value": 48
  },
  {
    "date": "2025-08-02",
    "value": 30
  },
  {
    "date": "2025-08-03",
    "value": 29
  },
  {
    "date": "2025-08-04",
    "value": 45
  },
  {
    "date": "2025-08-05",
    "value": 45
  },
  {
    "date": "2025-08-06",
    "value": 44
  },
  {
    "date": "2025-08-07",
    "value": 43
  },
  {
    "date": "2025-08-08",
    "value": 43
  },
  {
    "date": "2025-08-09",
    "value": 25
  },
  {
    "date": "2025-08-10",
    "value": 25
  },
  {
    "date": "2025-08-11",
    "value": 41
  },
  {
    "date": "2025-08-12",
    "value": 41
  },
  {
    "date": "2025-08-13",
    "value": 40
  },
  {
    "date": "2025-08-14",
    "value": 40
  },
  {
    "date": "2025-08-15",
    "value": 40
  },
  {
    "date": "2025-08-16",
    "value": 23
  },
  {
    "date": "2025-08-17",
    "value": 23
  },
  {
    "date": "2025-08-18",
    "value": 40
  },
  {
    "date": "2025-08-19",
    "value": 40
  },
  {
    "date": "2025-08-20",
    "value": 40
  },
  {
    "date": "2025-08-21",
    "value": 40
  },
  {
    "date": "2025-08-22",
    "value": 41
  },
  {
    "date": "2025-08-23",
    "value": 24
  },
  {
    "date": "2025-08-24",
    "value": 24
  },
  {
    "date": "2025-08-25",
    "value": 42
  },
  {
    "date": "2025-08-26",
    "value": 42
  },
  {
    "date": "2025-08-27",
    "value": 61
  },
  {
    "date": "2025-08-28",
    "value": 62
  },
  {
    "date": "2025-08-29",
    "value": 62
  },
  {
    "date": "2025-08-30",
    "value": 46
  },
  {
    "date": "2025-08-31",
    "value": 47
  },
  {
    "date": "2025-09-01",
    "value": 65
  },
  {
    "date": "2025-09-02",
    "value": 66
  },
  {
    "date": "2025-09-03",
    "value": 67
  },
  {
    "date": "2025-09-04",
    "value": 68
  },
  {
    "date": "2025-09-05",
    "value": 69
  },
  {
    "date": "2025-09-06",
    "value": 53
  },
  {
    "date": "2025-09-07",
    "value": 54
  },
  {
    "date": "2025-09-08",
    "value": 72
  },
  {
    "date": "2025-09-09",
    "value": 73
  },
  {
    "date": "2025-09-10",
    "value": 74
  },
  {
    "date": "2025-09-11",
    "value": 76
  },
  {
    "date": "2025-09-12",
    "value": 77
  },
  {
    "date": "2025-09-13",
    "value": 61
  },
  {
    "date": "2025-09-14",
    "value": 62
  },
  {
    "date": "2025-09-15",
    "value": 80
  },
  {
    "date": "2025-09-16",
    "value": 81
  },
  {
    "date": "2025-09-17",
    "value": 82
  },
  {
    "date": "2025-09-18",
    "value": 83
  },
  {
    "date": "2025-09-19",
    "value": 83
  },
  {
    "date": "2025-09-20",
    "value": 67
  },
  {
    "date": "2025-09-21",
    "value": 68
  },
  {
    "date": "2025-09-22",
    "value": 86
  },
  {
    "date": "2025-09-23",
    "value": 86
  },
  {
    "date": "2025-09-24",
    "value": 87
  },
  {
    "date": "2025-09-25",
    "value": 87
  },
  {
    "date": "2025-09-26",
    "value": 88
  },
  {
    "date": "2025-09-27",
    "value": 71
  },
  {
    "date": "2025-09-28",
    "value": 72
  },
  {
    "date": "2025-09-29",
    "value": 89
  },
  {
    "date": "2025-09-30",
    "value": 89
  },
  {
    "date": "2025-10-01",
    "value": 89
  },
  {
    "date": "2025-10-02",
    "value": 89
  },
  {
    "date": "2025-10-03",
    "value": 89
  },
  {
    "date": "2025-10-04",
    "value": 72
  },
  {
    "date": "2025-10-05",
    "value": 71
  },
  {
    "date": "2025-10-06",
    "value": 88
  },
  {
    "date": "2025-10-07",
    "value": 88
  },
  {
    "date": "2025-10-08",
    "value": 87
  },
  {
    "date": "2025-10-09",
    "value": 87
  },
  {
    "date": "2025-10-10",
    "value": 86
  },
  {
    "date": "2025-10-11",
    "value": 69
  },
  {
    "date": "2025-10-12",
    "value": 68
  },
  {
    "date": "2025-10-13",
    "value": 84
  },
  {
    "date": "2025-10-14",
    "value": 83
  },
  {
    "date": "2025-10-15",
    "value": 83
  },
  {
    "date": "2025-10-16",
    "value": 82
  },
  {
    "date": "2025-10-17",
    "value": 81
  },
  {
    "date": "2025-10-18",
    "value": 63
  },
  {
    "date": "2025-10-19",
    "value": 62
  },
  {
    "date": "2025-10-20",
    "value": 78
  },
  {
    "date": "2025-10-21",
    "value": 77
  },
  {
    "date": "2025-10-22",
    "value": 76
  },
  {
    "date": "2025-10-23",
    "value": 75
  },
  {
    "date": "2025-10-24",
    "value": 74
  },
  {
    "date": "2025-10-25",
    "value": 56
  },
  {
    "date": "2025-10-26",
    "value": 55
  },
  {
    "date": "2025-10-27",
    "value": 72
  },
  {
    "date": "2025-10-28",
    "value": 71
  },
  {
    "date": "2025-10-29",
    "value": 70
  },
  {
    "date": "2025-10-30",
    "value": 69
  },
  {
    "date": "2025-10-31",
    "value": 68
  },
  {
    "date": "2025-11-01",
    "value": 51
  },
  {
    "date": "2025-11-02",
    "value": 50
  },
  {
    "date": "2025-11-03",
    "value": 66
  },
  {
    "date": "2025-11-04",
    "value": 66
  },
  {
    "date": "2025-11-05",
    "value": 65
  },
  {
    "date": "2025-11-06",
    "value": 65
  },
  {
    "date": "2025-11-07",
    "value": 64
  },
  {
    "date": "2025-11-08",
    "value": 47
  },
  {
    "date": "2025-11-09",
    "value": 47
  },
  {
    "date": "2025-11-10",
    "value": 64
  },
  {
    "date": "2025-11-11",
    "value": 64
  },
  {
    "date": "2025-11-12",
    "value": 64
  },
  {
    "date": "2025-11-13",
    "value": 64
  },
  {
    "date": "2025-11-14",
    "value": 64
  },
  {
    "date": "2025-11-15",
    "value": 47
  },
  {
    "date": "2025-11-16",
    "value": 47
  },
  {
    "date": "2025-11-17",
    "value": 65
  },
  {
    "date": "2025-11-18",
    "value": 65
  },
  {
    "date": "2025-11-19",
    "value": 65
  },
  {
    "date": "2025-11-20",
    "value": 66
  },
  {
    "date": "2025-11-21",
    "value": 66
  },
  {
    "date": "2025-11-22",
    "value": 50
  },
  {
    "date": "2025-11-23",
    "value": 51
  },
  {
    "date": "2025-11-24",
    "value": 68
  },
  {
    "date": "2025-11-25",
    "value": 69
  },
  {
    "date": "2025-11-26",
    "value": 70
  },
  {
    "date": "2025-11-27",
    "value": 71
  },
  {
    "date": "2025-11-28",
    "value": 72
  },
  {
    "date": "2025-11-29",
    "value": 55
  },
  {
    "date": "2025-11-30",
    "value": 56
  },
  {
    "date": "2025-12-01",
    "value": 74
  },
  {
    "date": "2025-12-02",
    "value": 75
  },
  {
    "date": "2025-12-03",
    "value": 76
  },
  {
    "date": "2025-12-04",
    "value": 77
  },
  {
    "date": "2025-12-05",
    "value": 78
  },
  {
    "date": "2025-12-06",
    "value": 61
  },
  {
    "date": "2025-12-07",
    "value": 62
  },
  {
    "date": "2025-12-08",
    "value": 80
  },
  {
    "date": "2025-12-09",
    "value": 81
  },
  {
    "date": "2025-12-10",
    "value": 81
  },
  {
    "date": "2025-12-11",
    "value": 82
  },
  {
    "date": "2025-12-12",
    "value": 83
  },
  {
    "date": "2025-12-13",
    "value": 66
  },
  {
    "date": "2025-12-14",
    "value": 67
  },
  {
    "date": "2025-12-15",
    "value": 84
  },
  {
    "date": "2025-12-16",
    "value": 85
  },
  {
    "date": "2025-12-17",
    "value": 85
  },
  {
    "date": "2025-12-18",
    "value": 85
  },
  {
    "date": "2025-12-19",
    "value": 86
  },
  {
    "date": "2025-12-20",
    "value": 69
  },
  {
    "date": "2025-12-21",
    "value": 69
  },
  {
    "date": "2025-12-22",
    "value": 86
  },
  {
    "date": "2025-12-23",
    "value": 86
  },
  {
    "date": "2025-12-24",
    "value": 85
  },
  {
    "date": "2025-12-25",
    "value": 85
  },
  {
    "date": "2025-12-26",
    "value": 85
  },
  {
    "date": "2025-12-27",
    "value": 67
  },
  {
    "date": "2025-12-28",
    "value": 67
  },
  {
    "date": "2025-12-29",
    "value": 83
  },
  {
    "date": "2025-12-30",
    "value": 83
  },
  {
    "date": "2025-12-31",
    "value": 82
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "ko",
  "width": "container",
  "x": {
    "field": "date",
    "title": "Date",
    "type": "temporal"
  },
  "y": {
    "field": "value",
    "title": "Daily sessions",
    "type": "quantitative"
  }
};

Graflume.calendar('#chart', data, options);

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "ko",
  "width": "container",
  "x": {
    "field": "date",
    "title": "Date",
    "type": "temporal"
  },
  "y": {
    "field": "value",
    "title": "Daily sessions",
    "type": "quantitative"
  }
}

공통 기능

모든 차트에서 사용하는 기능

기능 탭을 선택해 헤더, 도구 설명, 테마, 범례, 강조, 말풍선, 선택, 화면 제어와 접근성을 하나씩 적용한 결과와 코드를 비교하세요. 데이터 표식 위에 마우스를 올리세요. 지원하는 차트에서는 축을 따라 커서를 움직이면 가장 가까운 값을 볼 수 있습니다. 모든 정확한 값은 아래 표에서 확인할 수 있습니다.

헤더

차트 안에 제목과 보조 설명을 넣어 무엇을 보여주는지 먼저 밝힙니다.

상태불러오는 중

  • header
Graflume.calendar() Canvas 2D
조작 도움말

확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.

Tab으로 조작부를 이동하고 Enter 또는 Space로 실행하세요. 차트에 초점이 있을 때 더하기·빼기 키로 확대·축소하고 화살표 키로 이동할 수 있습니다.

자동 배치는 둘레 후보를 비교해 차트·범례·다른 말풍선과의 겹침을 가능한 한 피합니다. 명시한 위치는 필요한 안전 보정만 적용해 유지합니다. 말풍선 글자는 상자 안에서 안전하게 자동 줄바꿈됩니다. 끊어지지 않는 긴 토큰은 정해진 줄 수 안에서 시각적으로 축약하지만, 보조 기술에는 원문 전체를 유지합니다.

불러오는 중

브라우저 API · 이식 가능한 스키마

브라우저 API

Graflume.calendar()

const data = [
  {
    "date": "2025-01-01",
    "value": 59
  },
  {
    "date": "2025-01-02",
    "value": 60
  },
  {
    "date": "2025-01-03",
    "value": 61
  },
  {
    "date": "2025-01-04",
    "value": 45
  },
  {
    "date": "2025-01-05",
    "value": 46
  },
  {
    "date": "2025-01-06",
    "value": 64
  },
  {
    "date": "2025-01-07",
    "value": 65
  },
  {
    "date": "2025-01-08",
    "value": 65
  },
  {
    "date": "2025-01-09",
    "value": 66
  },
  {
    "date": "2025-01-10",
    "value": 67
  },
  {
    "date": "2025-01-11",
    "value": 51
  },
  {
    "date": "2025-01-12",
    "value": 51
  },
  {
    "date": "2025-01-13",
    "value": 69
  },
  {
    "date": "2025-01-14",
    "value": 70
  },
  {
    "date": "2025-01-15",
    "value": 70
  },
  {
    "date": "2025-01-16",
    "value": 70
  },
  {
    "date": "2025-01-17",
    "value": 71
  },
  {
    "date": "2025-01-18",
    "value": 54
  },
  {
    "date": "2025-01-19",
    "value": 54
  },
  {
    "date": "2025-01-20",
    "value": 71
  },
  {
    "date": "2025-01-21",
    "value": 71
  },
  {
    "date": "2025-01-22",
    "value": 71
  },
  {
    "date": "2025-01-23",
    "value": 71
  },
  {
    "date": "2025-01-24",
    "value": 71
  },
  {
    "date": "2025-01-25",
    "value": 54
  },
  {
    "date": "2025-01-26",
    "value": 53
  },
  {
    "date": "2025-01-27",
    "value": 70
  },
  {
    "date": "2025-01-28",
    "value": 70
  },
  {
    "date": "2025-01-29",
    "value": 69
  },
  {
    "date": "2025-01-30",
    "value": 68
  },
  {
    "date": "2025-01-31",
    "value": 68
  },
  {
    "date": "2025-02-01",
    "value": 50
  },
  {
    "date": "2025-02-02",
    "value": 49
  },
  {
    "date": "2025-02-03",
    "value": 65
  },
  {
    "date": "2025-02-04",
    "value": 65
  },
  {
    "date": "2025-02-05",
    "value": 64
  },
  {
    "date": "2025-02-06",
    "value": 63
  },
  {
    "date": "2025-02-07",
    "value": 62
  },
  {
    "date": "2025-02-08",
    "value": 44
  },
  {
    "date": "2025-02-09",
    "value": 43
  },
  {
    "date": "2025-02-10",
    "value": 59
  },
  {
    "date": "2025-02-11",
    "value": 57
  },
  {
    "date": "2025-02-12",
    "value": 56
  },
  {
    "date": "2025-02-13",
    "value": 55
  },
  {
    "date": "2025-02-14",
    "value": 54
  },
  {
    "date": "2025-02-15",
    "value": 36
  },
  {
    "date": "2025-02-16",
    "value": 35
  },
  {
    "date": "2025-02-17",
    "value": 51
  },
  {
    "date": "2025-02-18",
    "value": 50
  },
  {
    "date": "2025-02-19",
    "value": 49
  },
  {
    "date": "2025-02-20",
    "value": 48
  },
  {
    "date": "2025-02-21",
    "value": 47
  },
  {
    "date": "2025-02-22",
    "value": 29
  },
  {
    "date": "2025-02-23",
    "value": 28
  },
  {
    "date": "2025-02-24",
    "value": 45
  },
  {
    "date": "2025-02-25",
    "value": 44
  },
  {
    "date": "2025-02-26",
    "value": 43
  },
  {
    "date": "2025-02-27",
    "value": 43
  },
  {
    "date": "2025-02-28",
    "value": 42
  },
  {
    "date": "2025-03-01",
    "value": 25
  },
  {
    "date": "2025-03-02",
    "value": 24
  },
  {
    "date": "2025-03-03",
    "value": 41
  },
  {
    "date": "2025-03-04",
    "value": 41
  },
  {
    "date": "2025-03-05",
    "value": 41
  },
  {
    "date": "2025-03-06",
    "value": 41
  },
  {
    "date": "2025-03-07",
    "value": 41
  },
  {
    "date": "2025-03-08",
    "value": 24
  },
  {
    "date": "2025-03-09",
    "value": 24
  },
  {
    "date": "2025-03-10",
    "value": 41
  },
  {
    "date": "2025-03-11",
    "value": 41
  },
  {
    "date": "2025-03-12",
    "value": 42
  },
  {
    "date": "2025-03-13",
    "value": 42
  },
  {
    "date": "2025-03-14",
    "value": 42
  },
  {
    "date": "2025-03-15",
    "value": 26
  },
  {
    "date": "2025-03-16",
    "value": 26
  },
  {
    "date": "2025-03-17",
    "value": 44
  },
  {
    "date": "2025-03-18",
    "value": 45
  },
  {
    "date": "2025-03-19",
    "value": 45
  },
  {
    "date": "2025-03-20",
    "value": 46
  },
  {
    "date": "2025-03-21",
    "value": 47
  },
  {
    "date": "2025-03-22",
    "value": 31
  },
  {
    "date": "2025-03-23",
    "value": 31
  },
  {
    "date": "2025-03-24",
    "value": 49
  },
  {
    "date": "2025-03-25",
    "value": 50
  },
  {
    "date": "2025-03-26",
    "value": 51
  },
  {
    "date": "2025-03-27",
    "value": 52
  },
  {
    "date": "2025-03-28",
    "value": 53
  },
  {
    "date": "2025-03-29",
    "value": 36
  },
  {
    "date": "2025-03-30",
    "value": 37
  },
  {
    "date": "2025-03-31",
    "value": 55
  },
  {
    "date": "2025-04-01",
    "value": 56
  },
  {
    "date": "2025-04-02",
    "value": 56
  },
  {
    "date": "2025-04-03",
    "value": 57
  },
  {
    "date": "2025-04-04",
    "value": 58
  },
  {
    "date": "2025-04-05",
    "value": 41
  },
  {
    "date": "2025-04-06",
    "value": 42
  },
  {
    "date": "2025-04-07",
    "value": 59
  },
  {
    "date": "2025-04-08",
    "value": 60
  },
  {
    "date": "2025-04-09",
    "value": 60
  },
  {
    "date": "2025-04-10",
    "value": 60
  },
  {
    "date": "2025-04-11",
    "value": 61
  },
  {
    "date": "2025-04-12",
    "value": 44
  },
  {
    "date": "2025-04-13",
    "value": 44
  },
  {
    "date": "2025-04-14",
    "value": 61
  },
  {
    "date": "2025-04-15",
    "value": 61
  },
  {
    "date": "2025-04-16",
    "value": 61
  },
  {
    "date": "2025-04-17",
    "value": 61
  },
  {
    "date": "2025-04-18",
    "value": 60
  },
  {
    "date": "2025-04-19",
    "value": 43
  },
  {
    "date": "2025-04-20",
    "value": 43
  },
  {
    "date": "2025-04-21",
    "value": 59
  },
  {
    "date": "2025-04-22",
    "value": 59
  },
  {
    "date": "2025-04-23",
    "value": 58
  },
  {
    "date": "2025-04-24",
    "value": 58
  },
  {
    "date": "2025-04-25",
    "value": 57
  },
  {
    "date": "2025-04-26",
    "value": 39
  },
  {
    "date": "2025-04-27",
    "value": 38
  },
  {
    "date": "2025-04-28",
    "value": 54
  },
  {
    "date": "2025-04-29",
    "value": 54
  },
  {
    "date": "2025-04-30",
    "value": 53
  },
  {
    "date": "2025-05-01",
    "value": 52
  },
  {
    "date": "2025-05-02",
    "value": 51
  },
  {
    "date": "2025-05-03",
    "value": 33
  },
  {
    "date": "2025-05-04",
    "value": 32
  },
  {
    "date": "2025-05-05",
    "value": 48
  },
  {
    "date": "2025-05-06",
    "value": 47
  },
  {
    "date": "2025-05-07",
    "value": 46
  },
  {
    "date": "2025-05-08",
    "value": 44
  },
  {
    "date": "2025-05-09",
    "value": 43
  },
  {
    "date": "2025-05-10",
    "value": 25
  },
  {
    "date": "2025-05-11",
    "value": 24
  },
  {
    "date": "2025-05-12",
    "value": 40
  },
  {
    "date": "2025-05-13",
    "value": 40
  },
  {
    "date": "2025-05-14",
    "value": 39
  },
  {
    "date": "2025-05-15",
    "value": 38
  },
  {
    "date": "2025-05-16",
    "value": 37
  },
  {
    "date": "2025-05-17",
    "value": 19
  },
  {
    "date": "2025-05-18",
    "value": 18
  },
  {
    "date": "2025-05-19",
    "value": 35
  },
  {
    "date": "2025-05-20",
    "value": 34
  },
  {
    "date": "2025-05-21",
    "value": 34
  },
  {
    "date": "2025-05-22",
    "value": 33
  },
  {
    "date": "2025-05-23",
    "value": 33
  },
  {
    "date": "2025-05-24",
    "value": 16
  },
  {
    "date": "2025-05-25",
    "value": 15
  },
  {
    "date": "2025-05-26",
    "value": 32
  },
  {
    "date": "2025-05-27",
    "value": 32
  },
  {
    "date": "2025-05-28",
    "value": 32
  },
  {
    "date": "2025-05-29",
    "value": 32
  },
  {
    "date": "2025-05-30",
    "value": 32
  },
  {
    "date": "2025-05-31",
    "value": 15
  },
  {
    "date": "2025-06-01",
    "value": 16
  },
  {
    "date": "2025-06-02",
    "value": 33
  },
  {
    "date": "2025-06-03",
    "value": 33
  },
  {
    "date": "2025-06-04",
    "value": 34
  },
  {
    "date": "2025-06-05",
    "value": 35
  },
  {
    "date": "2025-06-06",
    "value": 35
  },
  {
    "date": "2025-06-07",
    "value": 19
  },
  {
    "date": "2025-06-08",
    "value": 20
  },
  {
    "date": "2025-06-09",
    "value": 37
  },
  {
    "date": "2025-06-10",
    "value": 38
  },
  {
    "date": "2025-06-11",
    "value": 39
  },
  {
    "date": "2025-06-12",
    "value": 40
  },
  {
    "date": "2025-06-13",
    "value": 41
  },
  {
    "date": "2025-06-14",
    "value": 25
  },
  {
    "date": "2025-06-15",
    "value": 26
  },
  {
    "date": "2025-06-16",
    "value": 44
  },
  {
    "date": "2025-06-17",
    "value": 45
  },
  {
    "date": "2025-06-18",
    "value": 46
  },
  {
    "date": "2025-06-19",
    "value": 47
  },
  {
    "date": "2025-06-20",
    "value": 48
  },
  {
    "date": "2025-06-21",
    "value": 32
  },
  {
    "date": "2025-06-22",
    "value": 33
  },
  {
    "date": "2025-06-23",
    "value": 51
  },
  {
    "date": "2025-06-24",
    "value": 52
  },
  {
    "date": "2025-06-25",
    "value": 53
  },
  {
    "date": "2025-06-26",
    "value": 54
  },
  {
    "date": "2025-06-27",
    "value": 55
  },
  {
    "date": "2025-06-28",
    "value": 38
  },
  {
    "date": "2025-06-29",
    "value": 39
  },
  {
    "date": "2025-06-30",
    "value": 57
  },
  {
    "date": "2025-07-01",
    "value": 57
  },
  {
    "date": "2025-07-02",
    "value": 58
  },
  {
    "date": "2025-07-03",
    "value": 59
  },
  {
    "date": "2025-07-04",
    "value": 59
  },
  {
    "date": "2025-07-05",
    "value": 42
  },
  {
    "date": "2025-07-06",
    "value": 43
  },
  {
    "date": "2025-07-07",
    "value": 60
  },
  {
    "date": "2025-07-08",
    "value": 60
  },
  {
    "date": "2025-07-09",
    "value": 60
  },
  {
    "date": "2025-07-10",
    "value": 60
  },
  {
    "date": "2025-07-11",
    "value": 60
  },
  {
    "date": "2025-07-12",
    "value": 43
  },
  {
    "date": "2025-07-13",
    "value": 43
  },
  {
    "date": "2025-07-14",
    "value": 60
  },
  {
    "date": "2025-07-15",
    "value": 59
  },
  {
    "date": "2025-07-16",
    "value": 59
  },
  {
    "date": "2025-07-17",
    "value": 59
  },
  {
    "date": "2025-07-18",
    "value": 58
  },
  {
    "date": "2025-07-19",
    "value": 41
  },
  {
    "date": "2025-07-20",
    "value": 40
  },
  {
    "date": "2025-07-21",
    "value": 56
  },
  {
    "date": "2025-07-22",
    "value": 56
  },
  {
    "date": "2025-07-23",
    "value": 55
  },
  {
    "date": "2025-07-24",
    "value": 54
  },
  {
    "date": "2025-07-25",
    "value": 53
  },
  {
    "date": "2025-07-26",
    "value": 36
  },
  {
    "date": "2025-07-27",
    "value": 35
  },
  {
    "date": "2025-07-28",
    "value": 51
  },
  {
    "date": "2025-07-29",
    "value": 50
  },
  {
    "date": "2025-07-30",
    "value": 49
  },
  {
    "date": "2025-07-31",
    "value": 49
  },
  {
    "date": "2025-08-01",
    "value": 48
  },
  {
    "date": "2025-08-02",
    "value": 30
  },
  {
    "date": "2025-08-03",
    "value": 29
  },
  {
    "date": "2025-08-04",
    "value": 45
  },
  {
    "date": "2025-08-05",
    "value": 45
  },
  {
    "date": "2025-08-06",
    "value": 44
  },
  {
    "date": "2025-08-07",
    "value": 43
  },
  {
    "date": "2025-08-08",
    "value": 43
  },
  {
    "date": "2025-08-09",
    "value": 25
  },
  {
    "date": "2025-08-10",
    "value": 25
  },
  {
    "date": "2025-08-11",
    "value": 41
  },
  {
    "date": "2025-08-12",
    "value": 41
  },
  {
    "date": "2025-08-13",
    "value": 40
  },
  {
    "date": "2025-08-14",
    "value": 40
  },
  {
    "date": "2025-08-15",
    "value": 40
  },
  {
    "date": "2025-08-16",
    "value": 23
  },
  {
    "date": "2025-08-17",
    "value": 23
  },
  {
    "date": "2025-08-18",
    "value": 40
  },
  {
    "date": "2025-08-19",
    "value": 40
  },
  {
    "date": "2025-08-20",
    "value": 40
  },
  {
    "date": "2025-08-21",
    "value": 40
  },
  {
    "date": "2025-08-22",
    "value": 41
  },
  {
    "date": "2025-08-23",
    "value": 24
  },
  {
    "date": "2025-08-24",
    "value": 24
  },
  {
    "date": "2025-08-25",
    "value": 42
  },
  {
    "date": "2025-08-26",
    "value": 42
  },
  {
    "date": "2025-08-27",
    "value": 61
  },
  {
    "date": "2025-08-28",
    "value": 62
  },
  {
    "date": "2025-08-29",
    "value": 62
  },
  {
    "date": "2025-08-30",
    "value": 46
  },
  {
    "date": "2025-08-31",
    "value": 47
  },
  {
    "date": "2025-09-01",
    "value": 65
  },
  {
    "date": "2025-09-02",
    "value": 66
  },
  {
    "date": "2025-09-03",
    "value": 67
  },
  {
    "date": "2025-09-04",
    "value": 68
  },
  {
    "date": "2025-09-05",
    "value": 69
  },
  {
    "date": "2025-09-06",
    "value": 53
  },
  {
    "date": "2025-09-07",
    "value": 54
  },
  {
    "date": "2025-09-08",
    "value": 72
  },
  {
    "date": "2025-09-09",
    "value": 73
  },
  {
    "date": "2025-09-10",
    "value": 74
  },
  {
    "date": "2025-09-11",
    "value": 76
  },
  {
    "date": "2025-09-12",
    "value": 77
  },
  {
    "date": "2025-09-13",
    "value": 61
  },
  {
    "date": "2025-09-14",
    "value": 62
  },
  {
    "date": "2025-09-15",
    "value": 80
  },
  {
    "date": "2025-09-16",
    "value": 81
  },
  {
    "date": "2025-09-17",
    "value": 82
  },
  {
    "date": "2025-09-18",
    "value": 83
  },
  {
    "date": "2025-09-19",
    "value": 83
  },
  {
    "date": "2025-09-20",
    "value": 67
  },
  {
    "date": "2025-09-21",
    "value": 68
  },
  {
    "date": "2025-09-22",
    "value": 86
  },
  {
    "date": "2025-09-23",
    "value": 86
  },
  {
    "date": "2025-09-24",
    "value": 87
  },
  {
    "date": "2025-09-25",
    "value": 87
  },
  {
    "date": "2025-09-26",
    "value": 88
  },
  {
    "date": "2025-09-27",
    "value": 71
  },
  {
    "date": "2025-09-28",
    "value": 72
  },
  {
    "date": "2025-09-29",
    "value": 89
  },
  {
    "date": "2025-09-30",
    "value": 89
  },
  {
    "date": "2025-10-01",
    "value": 89
  },
  {
    "date": "2025-10-02",
    "value": 89
  },
  {
    "date": "2025-10-03",
    "value": 89
  },
  {
    "date": "2025-10-04",
    "value": 72
  },
  {
    "date": "2025-10-05",
    "value": 71
  },
  {
    "date": "2025-10-06",
    "value": 88
  },
  {
    "date": "2025-10-07",
    "value": 88
  },
  {
    "date": "2025-10-08",
    "value": 87
  },
  {
    "date": "2025-10-09",
    "value": 87
  },
  {
    "date": "2025-10-10",
    "value": 86
  },
  {
    "date": "2025-10-11",
    "value": 69
  },
  {
    "date": "2025-10-12",
    "value": 68
  },
  {
    "date": "2025-10-13",
    "value": 84
  },
  {
    "date": "2025-10-14",
    "value": 83
  },
  {
    "date": "2025-10-15",
    "value": 83
  },
  {
    "date": "2025-10-16",
    "value": 82
  },
  {
    "date": "2025-10-17",
    "value": 81
  },
  {
    "date": "2025-10-18",
    "value": 63
  },
  {
    "date": "2025-10-19",
    "value": 62
  },
  {
    "date": "2025-10-20",
    "value": 78
  },
  {
    "date": "2025-10-21",
    "value": 77
  },
  {
    "date": "2025-10-22",
    "value": 76
  },
  {
    "date": "2025-10-23",
    "value": 75
  },
  {
    "date": "2025-10-24",
    "value": 74
  },
  {
    "date": "2025-10-25",
    "value": 56
  },
  {
    "date": "2025-10-26",
    "value": 55
  },
  {
    "date": "2025-10-27",
    "value": 72
  },
  {
    "date": "2025-10-28",
    "value": 71
  },
  {
    "date": "2025-10-29",
    "value": 70
  },
  {
    "date": "2025-10-30",
    "value": 69
  },
  {
    "date": "2025-10-31",
    "value": 68
  },
  {
    "date": "2025-11-01",
    "value": 51
  },
  {
    "date": "2025-11-02",
    "value": 50
  },
  {
    "date": "2025-11-03",
    "value": 66
  },
  {
    "date": "2025-11-04",
    "value": 66
  },
  {
    "date": "2025-11-05",
    "value": 65
  },
  {
    "date": "2025-11-06",
    "value": 65
  },
  {
    "date": "2025-11-07",
    "value": 64
  },
  {
    "date": "2025-11-08",
    "value": 47
  },
  {
    "date": "2025-11-09",
    "value": 47
  },
  {
    "date": "2025-11-10",
    "value": 64
  },
  {
    "date": "2025-11-11",
    "value": 64
  },
  {
    "date": "2025-11-12",
    "value": 64
  },
  {
    "date": "2025-11-13",
    "value": 64
  },
  {
    "date": "2025-11-14",
    "value": 64
  },
  {
    "date": "2025-11-15",
    "value": 47
  },
  {
    "date": "2025-11-16",
    "value": 47
  },
  {
    "date": "2025-11-17",
    "value": 65
  },
  {
    "date": "2025-11-18",
    "value": 65
  },
  {
    "date": "2025-11-19",
    "value": 65
  },
  {
    "date": "2025-11-20",
    "value": 66
  },
  {
    "date": "2025-11-21",
    "value": 66
  },
  {
    "date": "2025-11-22",
    "value": 50
  },
  {
    "date": "2025-11-23",
    "value": 51
  },
  {
    "date": "2025-11-24",
    "value": 68
  },
  {
    "date": "2025-11-25",
    "value": 69
  },
  {
    "date": "2025-11-26",
    "value": 70
  },
  {
    "date": "2025-11-27",
    "value": 71
  },
  {
    "date": "2025-11-28",
    "value": 72
  },
  {
    "date": "2025-11-29",
    "value": 55
  },
  {
    "date": "2025-11-30",
    "value": 56
  },
  {
    "date": "2025-12-01",
    "value": 74
  },
  {
    "date": "2025-12-02",
    "value": 75
  },
  {
    "date": "2025-12-03",
    "value": 76
  },
  {
    "date": "2025-12-04",
    "value": 77
  },
  {
    "date": "2025-12-05",
    "value": 78
  },
  {
    "date": "2025-12-06",
    "value": 61
  },
  {
    "date": "2025-12-07",
    "value": 62
  },
  {
    "date": "2025-12-08",
    "value": 80
  },
  {
    "date": "2025-12-09",
    "value": 81
  },
  {
    "date": "2025-12-10",
    "value": 81
  },
  {
    "date": "2025-12-11",
    "value": 82
  },
  {
    "date": "2025-12-12",
    "value": 83
  },
  {
    "date": "2025-12-13",
    "value": 66
  },
  {
    "date": "2025-12-14",
    "value": 67
  },
  {
    "date": "2025-12-15",
    "value": 84
  },
  {
    "date": "2025-12-16",
    "value": 85
  },
  {
    "date": "2025-12-17",
    "value": 85
  },
  {
    "date": "2025-12-18",
    "value": 85
  },
  {
    "date": "2025-12-19",
    "value": 86
  },
  {
    "date": "2025-12-20",
    "value": 69
  },
  {
    "date": "2025-12-21",
    "value": 69
  },
  {
    "date": "2025-12-22",
    "value": 86
  },
  {
    "date": "2025-12-23",
    "value": 86
  },
  {
    "date": "2025-12-24",
    "value": 85
  },
  {
    "date": "2025-12-25",
    "value": 85
  },
  {
    "date": "2025-12-26",
    "value": 85
  },
  {
    "date": "2025-12-27",
    "value": 67
  },
  {
    "date": "2025-12-28",
    "value": 67
  },
  {
    "date": "2025-12-29",
    "value": 83
  },
  {
    "date": "2025-12-30",
    "value": 83
  },
  {
    "date": "2025-12-31",
    "value": 82
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "ko",
  "title": {
    "subtitle": "Calendar chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: UTC year grid · week by weekday cells.",
    "text": "Calendar"
  },
  "width": "container",
  "x": {
    "field": "date",
    "title": "Date",
    "type": "temporal"
  },
  "y": {
    "field": "value",
    "title": "Daily sessions",
    "type": "quantitative"
  }
};

Graflume.calendar('#chart', data, options);

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "ko",
  "title": {
    "subtitle": "Calendar chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: UTC year grid · week by weekday cells.",
    "text": "Calendar"
  },
  "width": "container",
  "x": {
    "field": "date",
    "title": "Date",
    "type": "temporal"
  },
  "y": {
    "field": "value",
    "title": "Daily sessions",
    "type": "quantitative"
  }
}

차트 고유 기능

이 차트만의 고유한 실행 기능

Graflume 공개 카탈로그에 등록된 이 계열의 모든 실행 모드입니다. 각 탭은 독립 데이터, 옵션, Quick API와 지원 기능 근거를 가집니다.

Calendar chart

Calendar chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: UTC year grid · week by weekday cells.

상태불러오는 중

  • calendar
  • UTC year grid
  • week by weekday cells
  • month headers
  • day hit targets
  • year/month/week/day modes
  • locale week start and timezone
  • leap/no-data/zero policy
  • month boundaries
Graflume.calendar() Canvas 2D
조작 도움말

확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.

Tab으로 조작부를 이동하고 Enter 또는 Space로 실행하세요. 차트에 초점이 있을 때 더하기·빼기 키로 확대·축소하고 화살표 키로 이동할 수 있습니다.

자동 배치는 둘레 후보를 비교해 차트·범례·다른 말풍선과의 겹침을 가능한 한 피합니다. 명시한 위치는 필요한 안전 보정만 적용해 유지합니다. 말풍선 글자는 상자 안에서 안전하게 자동 줄바꿈됩니다. 끊어지지 않는 긴 토큰은 정해진 줄 수 안에서 시각적으로 축약하지만, 보조 기술에는 원문 전체를 유지합니다.

불러오는 중

브라우저 API · 이식 가능한 스키마

브라우저 API

Graflume.calendar()

const data = [
  {
    "date": "2025-01-01",
    "value": 59
  },
  {
    "date": "2025-01-02",
    "value": 60
  },
  {
    "date": "2025-01-03",
    "value": 61
  },
  {
    "date": "2025-01-04",
    "value": 45
  },
  {
    "date": "2025-01-05",
    "value": 46
  },
  {
    "date": "2025-01-06",
    "value": 64
  },
  {
    "date": "2025-01-07",
    "value": 65
  },
  {
    "date": "2025-01-08",
    "value": 65
  },
  {
    "date": "2025-01-09",
    "value": 66
  },
  {
    "date": "2025-01-10",
    "value": 67
  },
  {
    "date": "2025-01-11",
    "value": 51
  },
  {
    "date": "2025-01-12",
    "value": 51
  },
  {
    "date": "2025-01-13",
    "value": 69
  },
  {
    "date": "2025-01-14",
    "value": 70
  },
  {
    "date": "2025-01-15",
    "value": 70
  },
  {
    "date": "2025-01-16",
    "value": 70
  },
  {
    "date": "2025-01-17",
    "value": 71
  },
  {
    "date": "2025-01-18",
    "value": 54
  },
  {
    "date": "2025-01-19",
    "value": 54
  },
  {
    "date": "2025-01-20",
    "value": 71
  },
  {
    "date": "2025-01-21",
    "value": 71
  },
  {
    "date": "2025-01-22",
    "value": 71
  },
  {
    "date": "2025-01-23",
    "value": 71
  },
  {
    "date": "2025-01-24",
    "value": 71
  },
  {
    "date": "2025-01-25",
    "value": 54
  },
  {
    "date": "2025-01-26",
    "value": 53
  },
  {
    "date": "2025-01-27",
    "value": 70
  },
  {
    "date": "2025-01-28",
    "value": 70
  },
  {
    "date": "2025-01-29",
    "value": 69
  },
  {
    "date": "2025-01-30",
    "value": 68
  },
  {
    "date": "2025-01-31",
    "value": 68
  },
  {
    "date": "2025-02-01",
    "value": 50
  },
  {
    "date": "2025-02-02",
    "value": 49
  },
  {
    "date": "2025-02-03",
    "value": 65
  },
  {
    "date": "2025-02-04",
    "value": 65
  },
  {
    "date": "2025-02-05",
    "value": 64
  },
  {
    "date": "2025-02-06",
    "value": 63
  },
  {
    "date": "2025-02-07",
    "value": 62
  },
  {
    "date": "2025-02-08",
    "value": 44
  },
  {
    "date": "2025-02-09",
    "value": 43
  },
  {
    "date": "2025-02-10",
    "value": 59
  },
  {
    "date": "2025-02-11",
    "value": 57
  },
  {
    "date": "2025-02-12",
    "value": 56
  },
  {
    "date": "2025-02-13",
    "value": 55
  },
  {
    "date": "2025-02-14",
    "value": 54
  },
  {
    "date": "2025-02-15",
    "value": 36
  },
  {
    "date": "2025-02-16",
    "value": 35
  },
  {
    "date": "2025-02-17",
    "value": 51
  },
  {
    "date": "2025-02-18",
    "value": 50
  },
  {
    "date": "2025-02-19",
    "value": 49
  },
  {
    "date": "2025-02-20",
    "value": 48
  },
  {
    "date": "2025-02-21",
    "value": 47
  },
  {
    "date": "2025-02-22",
    "value": 29
  },
  {
    "date": "2025-02-23",
    "value": 28
  },
  {
    "date": "2025-02-24",
    "value": 45
  },
  {
    "date": "2025-02-25",
    "value": 44
  },
  {
    "date": "2025-02-26",
    "value": 43
  },
  {
    "date": "2025-02-27",
    "value": 43
  },
  {
    "date": "2025-02-28",
    "value": 42
  },
  {
    "date": "2025-03-01",
    "value": 25
  },
  {
    "date": "2025-03-02",
    "value": 24
  },
  {
    "date": "2025-03-03",
    "value": 41
  },
  {
    "date": "2025-03-04",
    "value": 41
  },
  {
    "date": "2025-03-05",
    "value": 41
  },
  {
    "date": "2025-03-06",
    "value": 41
  },
  {
    "date": "2025-03-07",
    "value": 41
  },
  {
    "date": "2025-03-08",
    "value": 24
  },
  {
    "date": "2025-03-09",
    "value": 24
  },
  {
    "date": "2025-03-10",
    "value": 41
  },
  {
    "date": "2025-03-11",
    "value": 41
  },
  {
    "date": "2025-03-12",
    "value": 42
  },
  {
    "date": "2025-03-13",
    "value": 42
  },
  {
    "date": "2025-03-14",
    "value": 42
  },
  {
    "date": "2025-03-15",
    "value": 26
  },
  {
    "date": "2025-03-16",
    "value": 26
  },
  {
    "date": "2025-03-17",
    "value": 44
  },
  {
    "date": "2025-03-18",
    "value": 45
  },
  {
    "date": "2025-03-19",
    "value": 45
  },
  {
    "date": "2025-03-20",
    "value": 46
  },
  {
    "date": "2025-03-21",
    "value": 47
  },
  {
    "date": "2025-03-22",
    "value": 31
  },
  {
    "date": "2025-03-23",
    "value": 31
  },
  {
    "date": "2025-03-24",
    "value": 49
  },
  {
    "date": "2025-03-25",
    "value": 50
  },
  {
    "date": "2025-03-26",
    "value": 51
  },
  {
    "date": "2025-03-27",
    "value": 52
  },
  {
    "date": "2025-03-28",
    "value": 53
  },
  {
    "date": "2025-03-29",
    "value": 36
  },
  {
    "date": "2025-03-30",
    "value": 37
  },
  {
    "date": "2025-03-31",
    "value": 55
  },
  {
    "date": "2025-04-01",
    "value": 56
  },
  {
    "date": "2025-04-02",
    "value": 56
  },
  {
    "date": "2025-04-03",
    "value": 57
  },
  {
    "date": "2025-04-04",
    "value": 58
  },
  {
    "date": "2025-04-05",
    "value": 41
  },
  {
    "date": "2025-04-06",
    "value": 42
  },
  {
    "date": "2025-04-07",
    "value": 59
  },
  {
    "date": "2025-04-08",
    "value": 60
  },
  {
    "date": "2025-04-09",
    "value": 60
  },
  {
    "date": "2025-04-10",
    "value": 60
  },
  {
    "date": "2025-04-11",
    "value": 61
  },
  {
    "date": "2025-04-12",
    "value": 44
  },
  {
    "date": "2025-04-13",
    "value": 44
  },
  {
    "date": "2025-04-14",
    "value": 61
  },
  {
    "date": "2025-04-15",
    "value": 61
  },
  {
    "date": "2025-04-16",
    "value": 61
  },
  {
    "date": "2025-04-17",
    "value": 61
  },
  {
    "date": "2025-04-18",
    "value": 60
  },
  {
    "date": "2025-04-19",
    "value": 43
  },
  {
    "date": "2025-04-20",
    "value": 43
  },
  {
    "date": "2025-04-21",
    "value": 59
  },
  {
    "date": "2025-04-22",
    "value": 59
  },
  {
    "date": "2025-04-23",
    "value": 58
  },
  {
    "date": "2025-04-24",
    "value": 58
  },
  {
    "date": "2025-04-25",
    "value": 57
  },
  {
    "date": "2025-04-26",
    "value": 39
  },
  {
    "date": "2025-04-27",
    "value": 38
  },
  {
    "date": "2025-04-28",
    "value": 54
  },
  {
    "date": "2025-04-29",
    "value": 54
  },
  {
    "date": "2025-04-30",
    "value": 53
  },
  {
    "date": "2025-05-01",
    "value": 52
  },
  {
    "date": "2025-05-02",
    "value": 51
  },
  {
    "date": "2025-05-03",
    "value": 33
  },
  {
    "date": "2025-05-04",
    "value": 32
  },
  {
    "date": "2025-05-05",
    "value": 48
  },
  {
    "date": "2025-05-06",
    "value": 47
  },
  {
    "date": "2025-05-07",
    "value": 46
  },
  {
    "date": "2025-05-08",
    "value": 44
  },
  {
    "date": "2025-05-09",
    "value": 43
  },
  {
    "date": "2025-05-10",
    "value": 25
  },
  {
    "date": "2025-05-11",
    "value": 24
  },
  {
    "date": "2025-05-12",
    "value": 40
  },
  {
    "date": "2025-05-13",
    "value": 40
  },
  {
    "date": "2025-05-14",
    "value": 39
  },
  {
    "date": "2025-05-15",
    "value": 38
  },
  {
    "date": "2025-05-16",
    "value": 37
  },
  {
    "date": "2025-05-17",
    "value": 19
  },
  {
    "date": "2025-05-18",
    "value": 18
  },
  {
    "date": "2025-05-19",
    "value": 35
  },
  {
    "date": "2025-05-20",
    "value": 34
  },
  {
    "date": "2025-05-21",
    "value": 34
  },
  {
    "date": "2025-05-22",
    "value": 33
  },
  {
    "date": "2025-05-23",
    "value": 33
  },
  {
    "date": "2025-05-24",
    "value": 16
  },
  {
    "date": "2025-05-25",
    "value": 15
  },
  {
    "date": "2025-05-26",
    "value": 32
  },
  {
    "date": "2025-05-27",
    "value": 32
  },
  {
    "date": "2025-05-28",
    "value": 32
  },
  {
    "date": "2025-05-29",
    "value": 32
  },
  {
    "date": "2025-05-30",
    "value": 32
  },
  {
    "date": "2025-05-31",
    "value": 15
  },
  {
    "date": "2025-06-01",
    "value": 16
  },
  {
    "date": "2025-06-02",
    "value": 33
  },
  {
    "date": "2025-06-03",
    "value": 33
  },
  {
    "date": "2025-06-04",
    "value": 34
  },
  {
    "date": "2025-06-05",
    "value": 35
  },
  {
    "date": "2025-06-06",
    "value": 35
  },
  {
    "date": "2025-06-07",
    "value": 19
  },
  {
    "date": "2025-06-08",
    "value": 20
  },
  {
    "date": "2025-06-09",
    "value": 37
  },
  {
    "date": "2025-06-10",
    "value": 38
  },
  {
    "date": "2025-06-11",
    "value": 39
  },
  {
    "date": "2025-06-12",
    "value": 40
  },
  {
    "date": "2025-06-13",
    "value": 41
  },
  {
    "date": "2025-06-14",
    "value": 25
  },
  {
    "date": "2025-06-15",
    "value": 26
  },
  {
    "date": "2025-06-16",
    "value": 44
  },
  {
    "date": "2025-06-17",
    "value": 45
  },
  {
    "date": "2025-06-18",
    "value": 46
  },
  {
    "date": "2025-06-19",
    "value": 47
  },
  {
    "date": "2025-06-20",
    "value": 48
  },
  {
    "date": "2025-06-21",
    "value": 32
  },
  {
    "date": "2025-06-22",
    "value": 33
  },
  {
    "date": "2025-06-23",
    "value": 51
  },
  {
    "date": "2025-06-24",
    "value": 52
  },
  {
    "date": "2025-06-25",
    "value": 53
  },
  {
    "date": "2025-06-26",
    "value": 54
  },
  {
    "date": "2025-06-27",
    "value": 55
  },
  {
    "date": "2025-06-28",
    "value": 38
  },
  {
    "date": "2025-06-29",
    "value": 39
  },
  {
    "date": "2025-06-30",
    "value": 57
  },
  {
    "date": "2025-07-01",
    "value": 57
  },
  {
    "date": "2025-07-02",
    "value": 58
  },
  {
    "date": "2025-07-03",
    "value": 59
  },
  {
    "date": "2025-07-04",
    "value": 59
  },
  {
    "date": "2025-07-05",
    "value": 42
  },
  {
    "date": "2025-07-06",
    "value": 43
  },
  {
    "date": "2025-07-07",
    "value": 60
  },
  {
    "date": "2025-07-08",
    "value": 60
  },
  {
    "date": "2025-07-09",
    "value": 60
  },
  {
    "date": "2025-07-10",
    "value": 60
  },
  {
    "date": "2025-07-11",
    "value": 60
  },
  {
    "date": "2025-07-12",
    "value": 43
  },
  {
    "date": "2025-07-13",
    "value": 43
  },
  {
    "date": "2025-07-14",
    "value": 60
  },
  {
    "date": "2025-07-15",
    "value": 59
  },
  {
    "date": "2025-07-16",
    "value": 59
  },
  {
    "date": "2025-07-17",
    "value": 59
  },
  {
    "date": "2025-07-18",
    "value": 58
  },
  {
    "date": "2025-07-19",
    "value": 41
  },
  {
    "date": "2025-07-20",
    "value": 40
  },
  {
    "date": "2025-07-21",
    "value": 56
  },
  {
    "date": "2025-07-22",
    "value": 56
  },
  {
    "date": "2025-07-23",
    "value": 55
  },
  {
    "date": "2025-07-24",
    "value": 54
  },
  {
    "date": "2025-07-25",
    "value": 53
  },
  {
    "date": "2025-07-26",
    "value": 36
  },
  {
    "date": "2025-07-27",
    "value": 35
  },
  {
    "date": "2025-07-28",
    "value": 51
  },
  {
    "date": "2025-07-29",
    "value": 50
  },
  {
    "date": "2025-07-30",
    "value": 49
  },
  {
    "date": "2025-07-31",
    "value": 49
  },
  {
    "date": "2025-08-01",
    "value": 48
  },
  {
    "date": "2025-08-02",
    "value": 30
  },
  {
    "date": "2025-08-03",
    "value": 29
  },
  {
    "date": "2025-08-04",
    "value": 45
  },
  {
    "date": "2025-08-05",
    "value": 45
  },
  {
    "date": "2025-08-06",
    "value": 44
  },
  {
    "date": "2025-08-07",
    "value": 43
  },
  {
    "date": "2025-08-08",
    "value": 43
  },
  {
    "date": "2025-08-09",
    "value": 25
  },
  {
    "date": "2025-08-10",
    "value": 25
  },
  {
    "date": "2025-08-11",
    "value": 41
  },
  {
    "date": "2025-08-12",
    "value": 41
  },
  {
    "date": "2025-08-13",
    "value": 40
  },
  {
    "date": "2025-08-14",
    "value": 40
  },
  {
    "date": "2025-08-15",
    "value": 40
  },
  {
    "date": "2025-08-16",
    "value": 23
  },
  {
    "date": "2025-08-17",
    "value": 23
  },
  {
    "date": "2025-08-18",
    "value": 40
  },
  {
    "date": "2025-08-19",
    "value": 40
  },
  {
    "date": "2025-08-20",
    "value": 40
  },
  {
    "date": "2025-08-21",
    "value": 40
  },
  {
    "date": "2025-08-22",
    "value": 41
  },
  {
    "date": "2025-08-23",
    "value": 24
  },
  {
    "date": "2025-08-24",
    "value": 24
  },
  {
    "date": "2025-08-25",
    "value": 42
  },
  {
    "date": "2025-08-26",
    "value": 42
  },
  {
    "date": "2025-08-27",
    "value": 61
  },
  {
    "date": "2025-08-28",
    "value": 62
  },
  {
    "date": "2025-08-29",
    "value": 62
  },
  {
    "date": "2025-08-30",
    "value": 46
  },
  {
    "date": "2025-08-31",
    "value": 47
  },
  {
    "date": "2025-09-01",
    "value": 65
  },
  {
    "date": "2025-09-02",
    "value": 66
  },
  {
    "date": "2025-09-03",
    "value": 67
  },
  {
    "date": "2025-09-04",
    "value": 68
  },
  {
    "date": "2025-09-05",
    "value": 69
  },
  {
    "date": "2025-09-06",
    "value": 53
  },
  {
    "date": "2025-09-07",
    "value": 54
  },
  {
    "date": "2025-09-08",
    "value": 72
  },
  {
    "date": "2025-09-09",
    "value": 73
  },
  {
    "date": "2025-09-10",
    "value": 74
  },
  {
    "date": "2025-09-11",
    "value": 76
  },
  {
    "date": "2025-09-12",
    "value": 77
  },
  {
    "date": "2025-09-13",
    "value": 61
  },
  {
    "date": "2025-09-14",
    "value": 62
  },
  {
    "date": "2025-09-15",
    "value": 80
  },
  {
    "date": "2025-09-16",
    "value": 81
  },
  {
    "date": "2025-09-17",
    "value": 82
  },
  {
    "date": "2025-09-18",
    "value": 83
  },
  {
    "date": "2025-09-19",
    "value": 83
  },
  {
    "date": "2025-09-20",
    "value": 67
  },
  {
    "date": "2025-09-21",
    "value": 68
  },
  {
    "date": "2025-09-22",
    "value": 86
  },
  {
    "date": "2025-09-23",
    "value": 86
  },
  {
    "date": "2025-09-24",
    "value": 87
  },
  {
    "date": "2025-09-25",
    "value": 87
  },
  {
    "date": "2025-09-26",
    "value": 88
  },
  {
    "date": "2025-09-27",
    "value": 71
  },
  {
    "date": "2025-09-28",
    "value": 72
  },
  {
    "date": "2025-09-29",
    "value": 89
  },
  {
    "date": "2025-09-30",
    "value": 89
  },
  {
    "date": "2025-10-01",
    "value": 89
  },
  {
    "date": "2025-10-02",
    "value": 89
  },
  {
    "date": "2025-10-03",
    "value": 89
  },
  {
    "date": "2025-10-04",
    "value": 72
  },
  {
    "date": "2025-10-05",
    "value": 71
  },
  {
    "date": "2025-10-06",
    "value": 88
  },
  {
    "date": "2025-10-07",
    "value": 88
  },
  {
    "date": "2025-10-08",
    "value": 87
  },
  {
    "date": "2025-10-09",
    "value": 87
  },
  {
    "date": "2025-10-10",
    "value": 86
  },
  {
    "date": "2025-10-11",
    "value": 69
  },
  {
    "date": "2025-10-12",
    "value": 68
  },
  {
    "date": "2025-10-13",
    "value": 84
  },
  {
    "date": "2025-10-14",
    "value": 83
  },
  {
    "date": "2025-10-15",
    "value": 83
  },
  {
    "date": "2025-10-16",
    "value": 82
  },
  {
    "date": "2025-10-17",
    "value": 81
  },
  {
    "date": "2025-10-18",
    "value": 63
  },
  {
    "date": "2025-10-19",
    "value": 62
  },
  {
    "date": "2025-10-20",
    "value": 78
  },
  {
    "date": "2025-10-21",
    "value": 77
  },
  {
    "date": "2025-10-22",
    "value": 76
  },
  {
    "date": "2025-10-23",
    "value": 75
  },
  {
    "date": "2025-10-24",
    "value": 74
  },
  {
    "date": "2025-10-25",
    "value": 56
  },
  {
    "date": "2025-10-26",
    "value": 55
  },
  {
    "date": "2025-10-27",
    "value": 72
  },
  {
    "date": "2025-10-28",
    "value": 71
  },
  {
    "date": "2025-10-29",
    "value": 70
  },
  {
    "date": "2025-10-30",
    "value": 69
  },
  {
    "date": "2025-10-31",
    "value": 68
  },
  {
    "date": "2025-11-01",
    "value": 51
  },
  {
    "date": "2025-11-02",
    "value": 50
  },
  {
    "date": "2025-11-03",
    "value": 66
  },
  {
    "date": "2025-11-04",
    "value": 66
  },
  {
    "date": "2025-11-05",
    "value": 65
  },
  {
    "date": "2025-11-06",
    "value": 65
  },
  {
    "date": "2025-11-07",
    "value": 64
  },
  {
    "date": "2025-11-08",
    "value": 47
  },
  {
    "date": "2025-11-09",
    "value": 47
  },
  {
    "date": "2025-11-10",
    "value": 64
  },
  {
    "date": "2025-11-11",
    "value": 64
  },
  {
    "date": "2025-11-12",
    "value": 64
  },
  {
    "date": "2025-11-13",
    "value": 64
  },
  {
    "date": "2025-11-14",
    "value": 64
  },
  {
    "date": "2025-11-15",
    "value": 47
  },
  {
    "date": "2025-11-16",
    "value": 47
  },
  {
    "date": "2025-11-17",
    "value": 65
  },
  {
    "date": "2025-11-18",
    "value": 65
  },
  {
    "date": "2025-11-19",
    "value": 65
  },
  {
    "date": "2025-11-20",
    "value": 66
  },
  {
    "date": "2025-11-21",
    "value": 66
  },
  {
    "date": "2025-11-22",
    "value": 50
  },
  {
    "date": "2025-11-23",
    "value": 51
  },
  {
    "date": "2025-11-24",
    "value": 68
  },
  {
    "date": "2025-11-25",
    "value": 69
  },
  {
    "date": "2025-11-26",
    "value": 70
  },
  {
    "date": "2025-11-27",
    "value": 71
  },
  {
    "date": "2025-11-28",
    "value": 72
  },
  {
    "date": "2025-11-29",
    "value": 55
  },
  {
    "date": "2025-11-30",
    "value": 56
  },
  {
    "date": "2025-12-01",
    "value": 74
  },
  {
    "date": "2025-12-02",
    "value": 75
  },
  {
    "date": "2025-12-03",
    "value": 76
  },
  {
    "date": "2025-12-04",
    "value": 77
  },
  {
    "date": "2025-12-05",
    "value": 78
  },
  {
    "date": "2025-12-06",
    "value": 61
  },
  {
    "date": "2025-12-07",
    "value": 62
  },
  {
    "date": "2025-12-08",
    "value": 80
  },
  {
    "date": "2025-12-09",
    "value": 81
  },
  {
    "date": "2025-12-10",
    "value": 81
  },
  {
    "date": "2025-12-11",
    "value": 82
  },
  {
    "date": "2025-12-12",
    "value": 83
  },
  {
    "date": "2025-12-13",
    "value": 66
  },
  {
    "date": "2025-12-14",
    "value": 67
  },
  {
    "date": "2025-12-15",
    "value": 84
  },
  {
    "date": "2025-12-16",
    "value": 85
  },
  {
    "date": "2025-12-17",
    "value": 85
  },
  {
    "date": "2025-12-18",
    "value": 85
  },
  {
    "date": "2025-12-19",
    "value": 86
  },
  {
    "date": "2025-12-20",
    "value": 69
  },
  {
    "date": "2025-12-21",
    "value": 69
  },
  {
    "date": "2025-12-22",
    "value": 86
  },
  {
    "date": "2025-12-23",
    "value": 86
  },
  {
    "date": "2025-12-24",
    "value": 85
  },
  {
    "date": "2025-12-25",
    "value": 85
  },
  {
    "date": "2025-12-26",
    "value": 85
  },
  {
    "date": "2025-12-27",
    "value": 67
  },
  {
    "date": "2025-12-28",
    "value": 67
  },
  {
    "date": "2025-12-29",
    "value": 83
  },
  {
    "date": "2025-12-30",
    "value": 83
  },
  {
    "date": "2025-12-31",
    "value": 82
  }
];

const options = {
  "accessibility": {
    "description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
    "label": "Calendar example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "차트 조작",
        "enterFullscreen": "전체 화면 열기",
        "exitFullscreen": "전체 화면 닫기",
        "exportPng": "PNG 다운로드",
        "hideAnnotations": "설명 말풍선 숨기기",
        "loop": "반복 재생",
        "nextFrame": "다음 프레임",
        "pause": "일시 정지",
        "play": "재생",
        "previousFrame": "이전 프레임",
        "reset": "보기 초기화",
        "seek": "재생 위치",
        "showAnnotations": "설명 말풍선 표시",
        "speed": "재생 속도",
        "zoomIn": "확대",
        "zoomOut": "축소"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "dateStyle": "long",
          "field": "date",
          "format": "date",
          "label": "날짜",
          "timeZone": "UTC"
        },
        {
          "field": "value",
          "format": "number",
          "label": "값"
        }
      ],
      "title": "Calendar",
      "trigger": "mark"
    }
  },
  "locale": "ko",
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Calendar chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: UTC year grid · week by weekday cells.",
    "text": "Calendar"
  },
  "width": "container",
  "x": {
    "field": "date",
    "title": "Date",
    "type": "temporal"
  },
  "y": {
    "field": "value",
    "title": "Daily sessions",
    "type": "quantitative"
  }
};

Graflume.calendar('#chart', data, options);

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
    "label": "Calendar example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "차트 조작",
        "enterFullscreen": "전체 화면 열기",
        "exitFullscreen": "전체 화면 닫기",
        "exportPng": "PNG 다운로드",
        "hideAnnotations": "설명 말풍선 숨기기",
        "loop": "반복 재생",
        "nextFrame": "다음 프레임",
        "pause": "일시 정지",
        "play": "재생",
        "previousFrame": "이전 프레임",
        "reset": "보기 초기화",
        "seek": "재생 위치",
        "showAnnotations": "설명 말풍선 표시",
        "speed": "재생 속도",
        "zoomIn": "확대",
        "zoomOut": "축소"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "dateStyle": "long",
          "field": "date",
          "format": "date",
          "label": "날짜",
          "timeZone": "UTC"
        },
        {
          "field": "value",
          "format": "number",
          "label": "값"
        }
      ],
      "title": "Calendar",
      "trigger": "mark"
    }
  },
  "locale": "ko",
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Calendar chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: UTC year grid · week by weekday cells.",
    "text": "Calendar"
  },
  "width": "container",
  "x": {
    "field": "date",
    "title": "Date",
    "type": "temporal"
  },
  "y": {
    "field": "value",
    "title": "Daily sessions",
    "type": "quantitative"
  }
}

극단 사례

값의 범위·불규칙 구조·대용량 입력

성공할 수 있는 유효 데이터 안에서 수치 범위, 희소 구조와 대용량 입력을 검증합니다. 각 탭은 필요할 때만 데이터를 만들며 잘못된 값은 조용히 보정하지 않습니다.

큰 값·작은 값

0과 매우 작은 유한값부터 매우 큰 유한값까지 함께 넣어 자동 도메인, 정밀도와 기하가 무너지지 않는지 확인합니다. NaN과 Infinity는 의도적으로 거부됩니다. 유한값과 축 도메인을 보존하는 데이터 무결성 규칙 2개를 적용합니다.

상태불러오는 중

  • extreme-range
  • extreme-small
  • extreme-large
  • zero
  • mixed-sign
  • budget:marks<=6
Graflume.calendar() Canvas 2D
조작 도움말

확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.

Tab으로 조작부를 이동하고 Enter 또는 Space로 실행하세요. 차트에 초점이 있을 때 더하기·빼기 키로 확대·축소하고 화살표 키로 이동할 수 있습니다.

자동 배치는 둘레 후보를 비교해 차트·범례·다른 말풍선과의 겹침을 가능한 한 피합니다. 명시한 위치는 필요한 안전 보정만 적용해 유지합니다. 말풍선 글자는 상자 안에서 안전하게 자동 줄바꿈됩니다. 끊어지지 않는 긴 토큰은 정해진 줄 수 안에서 시각적으로 축약하지만, 보조 기술에는 원문 전체를 유지합니다.

불러오는 중

브라우저 API · 이식 가능한 스키마

브라우저 API

Graflume.calendar()

const data = [
  {
    "date": "2025-01-01",
    "value": -1000000000000
  },
  {
    "date": "2025-01-02",
    "value": -1e-9
  },
  {
    "date": "2025-01-03",
    "value": 0
  },
  {
    "date": "2025-01-04",
    "value": 1000000000000
  },
  {
    "date": "2025-01-05",
    "value": 1e-9
  },
  {
    "date": "2025-01-06",
    "value": 1000000
  }
];

const options = {
  "accessibility": {
    "description": "A complete year of daily activity with weekday rhythm and a release lift. The example uses curated, deterministic data and exposes its exact values in a semantic table.",
    "label": "Calendar"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "hover": true,
    "tooltip": {
      "fields": [
        {
          "dateStyle": "long",
          "field": "date",
          "format": "date",
          "label": "날짜",
          "timeZone": "UTC"
        },
        {
          "field": "value",
          "format": "number",
          "label": "값"
        }
      ],
      "title": "Calendar",
      "trigger": "mark"
    }
  },
  "locale": "ko",
  "title": {
    "subtitle": "edge case · range",
    "text": "Calendar"
  },
  "width": "container",
  "x": {
    "field": "date",
    "title": "Date",
    "type": "temporal"
  },
  "y": {
    "field": "value",
    "title": "Daily sessions",
    "type": "quantitative"
  }
};

Graflume.calendar('#chart', data, options);

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "A complete year of daily activity with weekday rhythm and a release lift. The example uses curated, deterministic data and exposes its exact values in a semantic table.",
    "label": "Calendar"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "hover": true,
    "tooltip": {
      "fields": [
        {
          "dateStyle": "long",
          "field": "date",
          "format": "date",
          "label": "날짜",
          "timeZone": "UTC"
        },
        {
          "field": "value",
          "format": "number",
          "label": "값"
        }
      ],
      "title": "Calendar",
      "trigger": "mark"
    }
  },
  "locale": "ko",
  "title": {
    "subtitle": "edge case · range",
    "text": "Calendar"
  },
  "width": "container",
  "x": {
    "field": "date",
    "title": "Date",
    "type": "temporal"
  },
  "y": {
    "field": "value",
    "title": "Daily sessions",
    "type": "quantitative"
  }
}

극단 환경

디바이스·입력·표시 능력에 맞춘 재구성

기기 이름을 추측하지 않고 컨테이너 크기, 입력 방식, 표시 능력과 사용자 선호를 조합합니다. 모바일·워치·전자종이·흑백·도트 화면과 표준 기반 극단 환경을 같은 차트에서 비교하세요.

반응형 화면

컨테이너 폭과 높이에 따라 축, 범례, 설명과 조작부를 자동 재배치합니다.

960×540 · adaptive.profiles=responsive-fluid
  • zoom-reflow
  • shape-rectangle
  • display-color
  • input-fine
  • motion-full
  • renderer-canvas-spatial

극단 환경 미리보기

위 프로필 탭을 선택하면 같은 데이터와 ChartSpec을 유지한 채 화면 크기, 입력 방식, 표시 능력과 사용자 선호에 맞춰 차트를 다시 구성합니다.

상태불러오는 중

  • adaptive
  • capability-driven
  • no-user-agent-branching
  • 범례: legend · continuous · value
  • 포인트·범위 하이라이트: highlights[] · datum · date
  • 설명 말풍선: annotations[] · datum · date · callout · placement:auto
  • 대화형 선택: selection · multiple · toggle
Graflume.calendar() Canvas 2D
조작 도움말

확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.

Tab으로 조작부를 이동하고 Enter 또는 Space로 실행하세요. 차트에 초점이 있을 때 더하기·빼기 키로 확대·축소하고 화살표 키로 이동할 수 있습니다.

자동 배치는 둘레 후보를 비교해 차트·범례·다른 말풍선과의 겹침을 가능한 한 피합니다. 명시한 위치는 필요한 안전 보정만 적용해 유지합니다. 말풍선 글자는 상자 안에서 안전하게 자동 줄바꿈됩니다. 끊어지지 않는 긴 토큰은 정해진 줄 수 안에서 시각적으로 축약하지만, 보조 기술에는 원문 전체를 유지합니다.

불러오는 중

브라우저 API · 이식 가능한 스키마

브라우저 API

Graflume.calendar()

const data = [
  {
    "date": "2025-01-01",
    "value": 59
  },
  {
    "date": "2025-01-02",
    "value": 60
  },
  {
    "date": "2025-01-03",
    "value": 61
  },
  {
    "date": "2025-01-04",
    "value": 45
  },
  {
    "date": "2025-01-05",
    "value": 46
  },
  {
    "date": "2025-01-06",
    "value": 64
  },
  {
    "date": "2025-01-07",
    "value": 65
  },
  {
    "date": "2025-01-08",
    "value": 65
  },
  {
    "date": "2025-01-09",
    "value": 66
  },
  {
    "date": "2025-01-10",
    "value": 67
  },
  {
    "date": "2025-01-11",
    "value": 51
  },
  {
    "date": "2025-01-12",
    "value": 51
  },
  {
    "date": "2025-01-13",
    "value": 69
  },
  {
    "date": "2025-01-14",
    "value": 70
  },
  {
    "date": "2025-01-15",
    "value": 70
  },
  {
    "date": "2025-01-16",
    "value": 70
  },
  {
    "date": "2025-01-17",
    "value": 71
  },
  {
    "date": "2025-01-18",
    "value": 54
  },
  {
    "date": "2025-01-19",
    "value": 54
  },
  {
    "date": "2025-01-20",
    "value": 71
  },
  {
    "date": "2025-01-21",
    "value": 71
  },
  {
    "date": "2025-01-22",
    "value": 71
  },
  {
    "date": "2025-01-23",
    "value": 71
  },
  {
    "date": "2025-01-24",
    "value": 71
  },
  {
    "date": "2025-01-25",
    "value": 54
  },
  {
    "date": "2025-01-26",
    "value": 53
  },
  {
    "date": "2025-01-27",
    "value": 70
  },
  {
    "date": "2025-01-28",
    "value": 70
  },
  {
    "date": "2025-01-29",
    "value": 69
  },
  {
    "date": "2025-01-30",
    "value": 68
  },
  {
    "date": "2025-01-31",
    "value": 68
  },
  {
    "date": "2025-02-01",
    "value": 50
  },
  {
    "date": "2025-02-02",
    "value": 49
  },
  {
    "date": "2025-02-03",
    "value": 65
  },
  {
    "date": "2025-02-04",
    "value": 65
  },
  {
    "date": "2025-02-05",
    "value": 64
  },
  {
    "date": "2025-02-06",
    "value": 63
  },
  {
    "date": "2025-02-07",
    "value": 62
  },
  {
    "date": "2025-02-08",
    "value": 44
  },
  {
    "date": "2025-02-09",
    "value": 43
  },
  {
    "date": "2025-02-10",
    "value": 59
  },
  {
    "date": "2025-02-11",
    "value": 57
  },
  {
    "date": "2025-02-12",
    "value": 56
  },
  {
    "date": "2025-02-13",
    "value": 55
  },
  {
    "date": "2025-02-14",
    "value": 54
  },
  {
    "date": "2025-02-15",
    "value": 36
  },
  {
    "date": "2025-02-16",
    "value": 35
  },
  {
    "date": "2025-02-17",
    "value": 51
  },
  {
    "date": "2025-02-18",
    "value": 50
  },
  {
    "date": "2025-02-19",
    "value": 49
  },
  {
    "date": "2025-02-20",
    "value": 48
  },
  {
    "date": "2025-02-21",
    "value": 47
  },
  {
    "date": "2025-02-22",
    "value": 29
  },
  {
    "date": "2025-02-23",
    "value": 28
  },
  {
    "date": "2025-02-24",
    "value": 45
  },
  {
    "date": "2025-02-25",
    "value": 44
  },
  {
    "date": "2025-02-26",
    "value": 43
  },
  {
    "date": "2025-02-27",
    "value": 43
  },
  {
    "date": "2025-02-28",
    "value": 42
  },
  {
    "date": "2025-03-01",
    "value": 25
  },
  {
    "date": "2025-03-02",
    "value": 24
  },
  {
    "date": "2025-03-03",
    "value": 41
  },
  {
    "date": "2025-03-04",
    "value": 41
  },
  {
    "date": "2025-03-05",
    "value": 41
  },
  {
    "date": "2025-03-06",
    "value": 41
  },
  {
    "date": "2025-03-07",
    "value": 41
  },
  {
    "date": "2025-03-08",
    "value": 24
  },
  {
    "date": "2025-03-09",
    "value": 24
  },
  {
    "date": "2025-03-10",
    "value": 41
  },
  {
    "date": "2025-03-11",
    "value": 41
  },
  {
    "date": "2025-03-12",
    "value": 42
  },
  {
    "date": "2025-03-13",
    "value": 42
  },
  {
    "date": "2025-03-14",
    "value": 42
  },
  {
    "date": "2025-03-15",
    "value": 26
  },
  {
    "date": "2025-03-16",
    "value": 26
  },
  {
    "date": "2025-03-17",
    "value": 44
  },
  {
    "date": "2025-03-18",
    "value": 45
  },
  {
    "date": "2025-03-19",
    "value": 45
  },
  {
    "date": "2025-03-20",
    "value": 46
  },
  {
    "date": "2025-03-21",
    "value": 47
  },
  {
    "date": "2025-03-22",
    "value": 31
  },
  {
    "date": "2025-03-23",
    "value": 31
  },
  {
    "date": "2025-03-24",
    "value": 49
  },
  {
    "date": "2025-03-25",
    "value": 50
  },
  {
    "date": "2025-03-26",
    "value": 51
  },
  {
    "date": "2025-03-27",
    "value": 52
  },
  {
    "date": "2025-03-28",
    "value": 53
  },
  {
    "date": "2025-03-29",
    "value": 36
  },
  {
    "date": "2025-03-30",
    "value": 37
  },
  {
    "date": "2025-03-31",
    "value": 55
  },
  {
    "date": "2025-04-01",
    "value": 56
  },
  {
    "date": "2025-04-02",
    "value": 56
  },
  {
    "date": "2025-04-03",
    "value": 57
  },
  {
    "date": "2025-04-04",
    "value": 58
  },
  {
    "date": "2025-04-05",
    "value": 41
  },
  {
    "date": "2025-04-06",
    "value": 42
  },
  {
    "date": "2025-04-07",
    "value": 59
  },
  {
    "date": "2025-04-08",
    "value": 60
  },
  {
    "date": "2025-04-09",
    "value": 60
  },
  {
    "date": "2025-04-10",
    "value": 60
  },
  {
    "date": "2025-04-11",
    "value": 61
  },
  {
    "date": "2025-04-12",
    "value": 44
  },
  {
    "date": "2025-04-13",
    "value": 44
  },
  {
    "date": "2025-04-14",
    "value": 61
  },
  {
    "date": "2025-04-15",
    "value": 61
  },
  {
    "date": "2025-04-16",
    "value": 61
  },
  {
    "date": "2025-04-17",
    "value": 61
  },
  {
    "date": "2025-04-18",
    "value": 60
  },
  {
    "date": "2025-04-19",
    "value": 43
  },
  {
    "date": "2025-04-20",
    "value": 43
  },
  {
    "date": "2025-04-21",
    "value": 59
  },
  {
    "date": "2025-04-22",
    "value": 59
  },
  {
    "date": "2025-04-23",
    "value": 58
  },
  {
    "date": "2025-04-24",
    "value": 58
  },
  {
    "date": "2025-04-25",
    "value": 57
  },
  {
    "date": "2025-04-26",
    "value": 39
  },
  {
    "date": "2025-04-27",
    "value": 38
  },
  {
    "date": "2025-04-28",
    "value": 54
  },
  {
    "date": "2025-04-29",
    "value": 54
  },
  {
    "date": "2025-04-30",
    "value": 53
  },
  {
    "date": "2025-05-01",
    "value": 52
  },
  {
    "date": "2025-05-02",
    "value": 51
  },
  {
    "date": "2025-05-03",
    "value": 33
  },
  {
    "date": "2025-05-04",
    "value": 32
  },
  {
    "date": "2025-05-05",
    "value": 48
  },
  {
    "date": "2025-05-06",
    "value": 47
  },
  {
    "date": "2025-05-07",
    "value": 46
  },
  {
    "date": "2025-05-08",
    "value": 44
  },
  {
    "date": "2025-05-09",
    "value": 43
  },
  {
    "date": "2025-05-10",
    "value": 25
  },
  {
    "date": "2025-05-11",
    "value": 24
  },
  {
    "date": "2025-05-12",
    "value": 40
  },
  {
    "date": "2025-05-13",
    "value": 40
  },
  {
    "date": "2025-05-14",
    "value": 39
  },
  {
    "date": "2025-05-15",
    "value": 38
  },
  {
    "date": "2025-05-16",
    "value": 37
  },
  {
    "date": "2025-05-17",
    "value": 19
  },
  {
    "date": "2025-05-18",
    "value": 18
  },
  {
    "date": "2025-05-19",
    "value": 35
  },
  {
    "date": "2025-05-20",
    "value": 34
  },
  {
    "date": "2025-05-21",
    "value": 34
  },
  {
    "date": "2025-05-22",
    "value": 33
  },
  {
    "date": "2025-05-23",
    "value": 33
  },
  {
    "date": "2025-05-24",
    "value": 16
  },
  {
    "date": "2025-05-25",
    "value": 15
  },
  {
    "date": "2025-05-26",
    "value": 32
  },
  {
    "date": "2025-05-27",
    "value": 32
  },
  {
    "date": "2025-05-28",
    "value": 32
  },
  {
    "date": "2025-05-29",
    "value": 32
  },
  {
    "date": "2025-05-30",
    "value": 32
  },
  {
    "date": "2025-05-31",
    "value": 15
  },
  {
    "date": "2025-06-01",
    "value": 16
  },
  {
    "date": "2025-06-02",
    "value": 33
  },
  {
    "date": "2025-06-03",
    "value": 33
  },
  {
    "date": "2025-06-04",
    "value": 34
  },
  {
    "date": "2025-06-05",
    "value": 35
  },
  {
    "date": "2025-06-06",
    "value": 35
  },
  {
    "date": "2025-06-07",
    "value": 19
  },
  {
    "date": "2025-06-08",
    "value": 20
  },
  {
    "date": "2025-06-09",
    "value": 37
  },
  {
    "date": "2025-06-10",
    "value": 38
  },
  {
    "date": "2025-06-11",
    "value": 39
  },
  {
    "date": "2025-06-12",
    "value": 40
  },
  {
    "date": "2025-06-13",
    "value": 41
  },
  {
    "date": "2025-06-14",
    "value": 25
  },
  {
    "date": "2025-06-15",
    "value": 26
  },
  {
    "date": "2025-06-16",
    "value": 44
  },
  {
    "date": "2025-06-17",
    "value": 45
  },
  {
    "date": "2025-06-18",
    "value": 46
  },
  {
    "date": "2025-06-19",
    "value": 47
  },
  {
    "date": "2025-06-20",
    "value": 48
  },
  {
    "date": "2025-06-21",
    "value": 32
  },
  {
    "date": "2025-06-22",
    "value": 33
  },
  {
    "date": "2025-06-23",
    "value": 51
  },
  {
    "date": "2025-06-24",
    "value": 52
  },
  {
    "date": "2025-06-25",
    "value": 53
  },
  {
    "date": "2025-06-26",
    "value": 54
  },
  {
    "date": "2025-06-27",
    "value": 55
  },
  {
    "date": "2025-06-28",
    "value": 38
  },
  {
    "date": "2025-06-29",
    "value": 39
  },
  {
    "date": "2025-06-30",
    "value": 57
  },
  {
    "date": "2025-07-01",
    "value": 57
  },
  {
    "date": "2025-07-02",
    "value": 58
  },
  {
    "date": "2025-07-03",
    "value": 59
  },
  {
    "date": "2025-07-04",
    "value": 59
  },
  {
    "date": "2025-07-05",
    "value": 42
  },
  {
    "date": "2025-07-06",
    "value": 43
  },
  {
    "date": "2025-07-07",
    "value": 60
  },
  {
    "date": "2025-07-08",
    "value": 60
  },
  {
    "date": "2025-07-09",
    "value": 60
  },
  {
    "date": "2025-07-10",
    "value": 60
  },
  {
    "date": "2025-07-11",
    "value": 60
  },
  {
    "date": "2025-07-12",
    "value": 43
  },
  {
    "date": "2025-07-13",
    "value": 43
  },
  {
    "date": "2025-07-14",
    "value": 60
  },
  {
    "date": "2025-07-15",
    "value": 59
  },
  {
    "date": "2025-07-16",
    "value": 59
  },
  {
    "date": "2025-07-17",
    "value": 59
  },
  {
    "date": "2025-07-18",
    "value": 58
  },
  {
    "date": "2025-07-19",
    "value": 41
  },
  {
    "date": "2025-07-20",
    "value": 40
  },
  {
    "date": "2025-07-21",
    "value": 56
  },
  {
    "date": "2025-07-22",
    "value": 56
  },
  {
    "date": "2025-07-23",
    "value": 55
  },
  {
    "date": "2025-07-24",
    "value": 54
  },
  {
    "date": "2025-07-25",
    "value": 53
  },
  {
    "date": "2025-07-26",
    "value": 36
  },
  {
    "date": "2025-07-27",
    "value": 35
  },
  {
    "date": "2025-07-28",
    "value": 51
  },
  {
    "date": "2025-07-29",
    "value": 50
  },
  {
    "date": "2025-07-30",
    "value": 49
  },
  {
    "date": "2025-07-31",
    "value": 49
  },
  {
    "date": "2025-08-01",
    "value": 48
  },
  {
    "date": "2025-08-02",
    "value": 30
  },
  {
    "date": "2025-08-03",
    "value": 29
  },
  {
    "date": "2025-08-04",
    "value": 45
  },
  {
    "date": "2025-08-05",
    "value": 45
  },
  {
    "date": "2025-08-06",
    "value": 44
  },
  {
    "date": "2025-08-07",
    "value": 43
  },
  {
    "date": "2025-08-08",
    "value": 43
  },
  {
    "date": "2025-08-09",
    "value": 25
  },
  {
    "date": "2025-08-10",
    "value": 25
  },
  {
    "date": "2025-08-11",
    "value": 41
  },
  {
    "date": "2025-08-12",
    "value": 41
  },
  {
    "date": "2025-08-13",
    "value": 40
  },
  {
    "date": "2025-08-14",
    "value": 40
  },
  {
    "date": "2025-08-15",
    "value": 40
  },
  {
    "date": "2025-08-16",
    "value": 23
  },
  {
    "date": "2025-08-17",
    "value": 23
  },
  {
    "date": "2025-08-18",
    "value": 40
  },
  {
    "date": "2025-08-19",
    "value": 40
  },
  {
    "date": "2025-08-20",
    "value": 40
  },
  {
    "date": "2025-08-21",
    "value": 40
  },
  {
    "date": "2025-08-22",
    "value": 41
  },
  {
    "date": "2025-08-23",
    "value": 24
  },
  {
    "date": "2025-08-24",
    "value": 24
  },
  {
    "date": "2025-08-25",
    "value": 42
  },
  {
    "date": "2025-08-26",
    "value": 42
  },
  {
    "date": "2025-08-27",
    "value": 61
  },
  {
    "date": "2025-08-28",
    "value": 62
  },
  {
    "date": "2025-08-29",
    "value": 62
  },
  {
    "date": "2025-08-30",
    "value": 46
  },
  {
    "date": "2025-08-31",
    "value": 47
  },
  {
    "date": "2025-09-01",
    "value": 65
  },
  {
    "date": "2025-09-02",
    "value": 66
  },
  {
    "date": "2025-09-03",
    "value": 67
  },
  {
    "date": "2025-09-04",
    "value": 68
  },
  {
    "date": "2025-09-05",
    "value": 69
  },
  {
    "date": "2025-09-06",
    "value": 53
  },
  {
    "date": "2025-09-07",
    "value": 54
  },
  {
    "date": "2025-09-08",
    "value": 72
  },
  {
    "date": "2025-09-09",
    "value": 73
  },
  {
    "date": "2025-09-10",
    "value": 74
  },
  {
    "date": "2025-09-11",
    "value": 76
  },
  {
    "date": "2025-09-12",
    "value": 77
  },
  {
    "date": "2025-09-13",
    "value": 61
  },
  {
    "date": "2025-09-14",
    "value": 62
  },
  {
    "date": "2025-09-15",
    "value": 80
  },
  {
    "date": "2025-09-16",
    "value": 81
  },
  {
    "date": "2025-09-17",
    "value": 82
  },
  {
    "date": "2025-09-18",
    "value": 83
  },
  {
    "date": "2025-09-19",
    "value": 83
  },
  {
    "date": "2025-09-20",
    "value": 67
  },
  {
    "date": "2025-09-21",
    "value": 68
  },
  {
    "date": "2025-09-22",
    "value": 86
  },
  {
    "date": "2025-09-23",
    "value": 86
  },
  {
    "date": "2025-09-24",
    "value": 87
  },
  {
    "date": "2025-09-25",
    "value": 87
  },
  {
    "date": "2025-09-26",
    "value": 88
  },
  {
    "date": "2025-09-27",
    "value": 71
  },
  {
    "date": "2025-09-28",
    "value": 72
  },
  {
    "date": "2025-09-29",
    "value": 89
  },
  {
    "date": "2025-09-30",
    "value": 89
  },
  {
    "date": "2025-10-01",
    "value": 89
  },
  {
    "date": "2025-10-02",
    "value": 89
  },
  {
    "date": "2025-10-03",
    "value": 89
  },
  {
    "date": "2025-10-04",
    "value": 72
  },
  {
    "date": "2025-10-05",
    "value": 71
  },
  {
    "date": "2025-10-06",
    "value": 88
  },
  {
    "date": "2025-10-07",
    "value": 88
  },
  {
    "date": "2025-10-08",
    "value": 87
  },
  {
    "date": "2025-10-09",
    "value": 87
  },
  {
    "date": "2025-10-10",
    "value": 86
  },
  {
    "date": "2025-10-11",
    "value": 69
  },
  {
    "date": "2025-10-12",
    "value": 68
  },
  {
    "date": "2025-10-13",
    "value": 84
  },
  {
    "date": "2025-10-14",
    "value": 83
  },
  {
    "date": "2025-10-15",
    "value": 83
  },
  {
    "date": "2025-10-16",
    "value": 82
  },
  {
    "date": "2025-10-17",
    "value": 81
  },
  {
    "date": "2025-10-18",
    "value": 63
  },
  {
    "date": "2025-10-19",
    "value": 62
  },
  {
    "date": "2025-10-20",
    "value": 78
  },
  {
    "date": "2025-10-21",
    "value": 77
  },
  {
    "date": "2025-10-22",
    "value": 76
  },
  {
    "date": "2025-10-23",
    "value": 75
  },
  {
    "date": "2025-10-24",
    "value": 74
  },
  {
    "date": "2025-10-25",
    "value": 56
  },
  {
    "date": "2025-10-26",
    "value": 55
  },
  {
    "date": "2025-10-27",
    "value": 72
  },
  {
    "date": "2025-10-28",
    "value": 71
  },
  {
    "date": "2025-10-29",
    "value": 70
  },
  {
    "date": "2025-10-30",
    "value": 69
  },
  {
    "date": "2025-10-31",
    "value": 68
  },
  {
    "date": "2025-11-01",
    "value": 51
  },
  {
    "date": "2025-11-02",
    "value": 50
  },
  {
    "date": "2025-11-03",
    "value": 66
  },
  {
    "date": "2025-11-04",
    "value": 66
  },
  {
    "date": "2025-11-05",
    "value": 65
  },
  {
    "date": "2025-11-06",
    "value": 65
  },
  {
    "date": "2025-11-07",
    "value": 64
  },
  {
    "date": "2025-11-08",
    "value": 47
  },
  {
    "date": "2025-11-09",
    "value": 47
  },
  {
    "date": "2025-11-10",
    "value": 64
  },
  {
    "date": "2025-11-11",
    "value": 64
  },
  {
    "date": "2025-11-12",
    "value": 64
  },
  {
    "date": "2025-11-13",
    "value": 64
  },
  {
    "date": "2025-11-14",
    "value": 64
  },
  {
    "date": "2025-11-15",
    "value": 47
  },
  {
    "date": "2025-11-16",
    "value": 47
  },
  {
    "date": "2025-11-17",
    "value": 65
  },
  {
    "date": "2025-11-18",
    "value": 65
  },
  {
    "date": "2025-11-19",
    "value": 65
  },
  {
    "date": "2025-11-20",
    "value": 66
  },
  {
    "date": "2025-11-21",
    "value": 66
  },
  {
    "date": "2025-11-22",
    "value": 50
  },
  {
    "date": "2025-11-23",
    "value": 51
  },
  {
    "date": "2025-11-24",
    "value": 68
  },
  {
    "date": "2025-11-25",
    "value": 69
  },
  {
    "date": "2025-11-26",
    "value": 70
  },
  {
    "date": "2025-11-27",
    "value": 71
  },
  {
    "date": "2025-11-28",
    "value": 72
  },
  {
    "date": "2025-11-29",
    "value": 55
  },
  {
    "date": "2025-11-30",
    "value": 56
  },
  {
    "date": "2025-12-01",
    "value": 74
  },
  {
    "date": "2025-12-02",
    "value": 75
  },
  {
    "date": "2025-12-03",
    "value": 76
  },
  {
    "date": "2025-12-04",
    "value": 77
  },
  {
    "date": "2025-12-05",
    "value": 78
  },
  {
    "date": "2025-12-06",
    "value": 61
  },
  {
    "date": "2025-12-07",
    "value": 62
  },
  {
    "date": "2025-12-08",
    "value": 80
  },
  {
    "date": "2025-12-09",
    "value": 81
  },
  {
    "date": "2025-12-10",
    "value": 81
  },
  {
    "date": "2025-12-11",
    "value": 82
  },
  {
    "date": "2025-12-12",
    "value": 83
  },
  {
    "date": "2025-12-13",
    "value": 66
  },
  {
    "date": "2025-12-14",
    "value": 67
  },
  {
    "date": "2025-12-15",
    "value": 84
  },
  {
    "date": "2025-12-16",
    "value": 85
  },
  {
    "date": "2025-12-17",
    "value": 85
  },
  {
    "date": "2025-12-18",
    "value": 85
  },
  {
    "date": "2025-12-19",
    "value": 86
  },
  {
    "date": "2025-12-20",
    "value": 69
  },
  {
    "date": "2025-12-21",
    "value": 69
  },
  {
    "date": "2025-12-22",
    "value": 86
  },
  {
    "date": "2025-12-23",
    "value": 86
  },
  {
    "date": "2025-12-24",
    "value": 85
  },
  {
    "date": "2025-12-25",
    "value": 85
  },
  {
    "date": "2025-12-26",
    "value": 85
  },
  {
    "date": "2025-12-27",
    "value": 67
  },
  {
    "date": "2025-12-28",
    "value": 67
  },
  {
    "date": "2025-12-29",
    "value": 83
  },
  {
    "date": "2025-12-30",
    "value": 83
  },
  {
    "date": "2025-12-31",
    "value": 82
  }
];

const options = {
  "accessibility": {
    "description": "A complete year of daily activity with weekday rhythm and a release lift. The example uses curated, deterministic data and exposes its exact values in a semantic table.",
    "label": "Calendar chart: A complete year of daily activity with weekday rhythm and a release lift"
  },
  "annotations": [
    {
      "connector": {
        "visible": true
      },
      "detail": "데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다.",
      "id": "manual-callout",
      "placement": "auto",
      "style": {
        "maxWidth": 220,
        "padding": 8
      },
      "target": {
        "field": "date",
        "type": "datum",
        "value": "2025-03-06"
      },
      "text": "포인트·범위 하이라이트 · 2025-03-06"
    }
  ],
  "axes": {
    "x": false,
    "y": false
  },
  "create": {
    "adaptive": {
      "profiles": "auto"
    }
  },
  "height": 620,
  "highlights": [
    {
      "id": "manual-focus",
      "padding": 7,
      "target": {
        "field": "date",
        "type": "datum",
        "value": "2025-03-06"
      }
    }
  ],
  "interaction": {
    "controls": {
      "annotations": true,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "차트 조작",
        "enterFullscreen": "전체 화면 열기",
        "exitFullscreen": "전체 화면 닫기",
        "exportPng": "PNG 다운로드",
        "hideAnnotations": "설명 말풍선 숨기기",
        "loop": "반복 재생",
        "nextFrame": "다음 프레임",
        "pause": "일시 정지",
        "play": "재생",
        "previousFrame": "이전 프레임",
        "reset": "보기 초기화",
        "seek": "재생 위치",
        "showAnnotations": "설명 말풍선 표시",
        "speed": "재생 속도",
        "zoomIn": "확대",
        "zoomOut": "축소"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "selection": {
      "ariaLabel": "대화형 선택",
      "clearOnBackground": true,
      "clearOnEscape": true,
      "highlight": {
        "padding": 5
      },
      "key": "date",
      "mode": "multiple",
      "toggle": true
    },
    "tooltip": {
      "fields": [
        {
          "dateStyle": "long",
          "field": "date",
          "format": "date",
          "label": "날짜",
          "timeZone": "UTC"
        },
        {
          "field": "value",
          "format": "number",
          "label": "값"
        }
      ],
      "title": "Calendar",
      "trigger": "mark"
    }
  },
  "legend": {
    "field": "value",
    "interactive": false,
    "labels": {
      "hide": "숨기기",
      "show": "표시"
    },
    "maxItems": 8,
    "mode": "continuous",
    "orientation": "horizontal",
    "position": "bottom",
    "title": "값",
    "visible": true
  },
  "locale": "ko",
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "A complete year of daily activity with weekday rhythm and a release lift",
    "text": "Calendar chart"
  },
  "width": "container",
  "x": {
    "field": "date",
    "title": "Date",
    "type": "temporal"
  },
  "y": {
    "field": "value",
    "title": "Daily sessions",
    "type": "quantitative"
  }
};

Graflume.calendar('#chart', data, options);

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "A complete year of daily activity with weekday rhythm and a release lift. The example uses curated, deterministic data and exposes its exact values in a semantic table.",
    "label": "Calendar chart: A complete year of daily activity with weekday rhythm and a release lift"
  },
  "annotations": [
    {
      "connector": {
        "visible": true
      },
      "detail": "데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다.",
      "id": "manual-callout",
      "placement": "auto",
      "style": {
        "maxWidth": 220,
        "padding": 8
      },
      "target": {
        "field": "date",
        "type": "datum",
        "value": "2025-03-06"
      },
      "text": "포인트·범위 하이라이트 · 2025-03-06"
    }
  ],
  "axes": {
    "x": false,
    "y": false
  },
  "create": {
    "adaptive": {
      "profiles": "auto"
    }
  },
  "height": 620,
  "highlights": [
    {
      "id": "manual-focus",
      "padding": 7,
      "target": {
        "field": "date",
        "type": "datum",
        "value": "2025-03-06"
      }
    }
  ],
  "interaction": {
    "controls": {
      "annotations": true,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "차트 조작",
        "enterFullscreen": "전체 화면 열기",
        "exitFullscreen": "전체 화면 닫기",
        "exportPng": "PNG 다운로드",
        "hideAnnotations": "설명 말풍선 숨기기",
        "loop": "반복 재생",
        "nextFrame": "다음 프레임",
        "pause": "일시 정지",
        "play": "재생",
        "previousFrame": "이전 프레임",
        "reset": "보기 초기화",
        "seek": "재생 위치",
        "showAnnotations": "설명 말풍선 표시",
        "speed": "재생 속도",
        "zoomIn": "확대",
        "zoomOut": "축소"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "selection": {
      "ariaLabel": "대화형 선택",
      "clearOnBackground": true,
      "clearOnEscape": true,
      "highlight": {
        "padding": 5
      },
      "key": "date",
      "mode": "multiple",
      "toggle": true
    },
    "tooltip": {
      "fields": [
        {
          "dateStyle": "long",
          "field": "date",
          "format": "date",
          "label": "날짜",
          "timeZone": "UTC"
        },
        {
          "field": "value",
          "format": "number",
          "label": "값"
        }
      ],
      "title": "Calendar",
      "trigger": "mark"
    }
  },
  "legend": {
    "field": "value",
    "interactive": false,
    "labels": {
      "hide": "숨기기",
      "show": "표시"
    },
    "maxItems": 8,
    "mode": "continuous",
    "orientation": "horizontal",
    "position": "bottom",
    "title": "값",
    "visible": true
  },
  "locale": "ko",
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "A complete year of daily activity with weekday rhythm and a release lift",
    "text": "Calendar chart"
  },
  "width": "container",
  "x": {
    "field": "date",
    "title": "Date",
    "type": "temporal"
  },
  "y": {
    "field": "value",
    "title": "Daily sessions",
    "type": "quantitative"
  }
}

Catalog

Modes · compatibility identifiers

The source-controlled catalog maps callable modes in this family and compatibility identifiers to their canonical modes. This table contains executable entries only.

1 modes · 0 compatibility identifiers

Calendar · supported modes · representative calendar
IDNameQuick APImodemarkrenderer
calendarCalendar chartcalendar()defaultcalendarcanvas

매뉴얼

통합 체크리스트

ARIA · table fallback

접근성

Canvas ARIA 메타데이터에 텍스트 요약과 표 대체 표현을 함께 제공합니다.

standard · large · ultra

성능

standard·large·ultra 프로필은 렌더링 작업량을 제한합니다.

차트 카탈로그