Graflume · Alpha

Combination · 극단 환경 적용

매출 막대와 이익률 선처럼 단위가 다른 계층을 왼쪽 기본축과 오른쪽 보조축으로 비교합니다. 기기 이름을 추측하지 않고 컨테이너 크기, 입력 방식, 표시 능력과 사용자 선호를 조합합니다. 모바일·워치·전자종이·흑백·도트 화면과 표준 기반 극단 환경을 같은 차트에서 비교하세요.

차트 계열 · 기본 차트 계열

Combination

매출 막대와 이익률 선처럼 단위가 다른 계층을 왼쪽 기본축과 오른쪽 보조축으로 비교합니다.

Quick API
combo()
브라우저 스냅샷
graflume
mark
multiple
프리셋
2

극단 환경

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

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

반응형 화면

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

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 · layers · interactive
  • 포인트·범위 하이라이트: highlights[] · datum · category
  • 설명 말풍선: annotations[] · datum · category · callout · placement:auto
  • 대화형 선택: selection · multiple · toggle
Graflume.combo() Canvas 2D
조작 도움말

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

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

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

재생은 안정 키가 같은 요소를 600ms ease-in-out으로 부드럽게 보간합니다. 새로 나타나거나 사라지는 표식은 페이드하고, 형태가 호환되지 않으면 교차 페이드하며, 동작 줄이기 환경에서는 즉시 최종 상태를 표시합니다.

playback · cumulative · period · key=period · transition=600ms/ease-in-out · fade/crossfade

불러오는 중

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

브라우저 API

Graflume.combo()

const data = [
  {
    "base": 37.44,
    "category": "Jan",
    "close": 48,
    "conversion": 18,
    "date": "2026-01-01",
    "direction": 28,
    "down": 78,
    "high": 54,
    "low": 44,
    "lower": 43,
    "magnitude": 7,
    "minus": 39,
    "open": 44,
    "plus": 24,
    "previous": 44,
    "price": 72,
    "radius": 20.560000000000002,
    "resistance": 57,
    "secondary": 36,
    "series": "Before launch",
    "signal": 48.2,
    "speed": 18,
    "support": 40,
    "target": 50,
    "title": "",
    "up": 54,
    "upper": 55,
    "value": 48,
    "volume": 1250,
    "width": 2.8,
    "z": 8
  },
  {
    "base": 41.34,
    "category": "Feb",
    "close": 53,
    "conversion": 20.28,
    "date": "2026-02-01",
    "direction": 59,
    "down": 76.3,
    "high": 60,
    "low": 48,
    "lower": 47,
    "magnitude": 9.4,
    "minus": 37.9,
    "open": 48,
    "plus": 25.6,
    "previous": 48,
    "price": 75.41,
    "radius": 21.66,
    "resistance": 62,
    "secondary": 41.97,
    "series": "Before launch",
    "signal": 53.16,
    "speed": 20.7,
    "support": 45,
    "target": 54.6,
    "title": "",
    "up": 56.4,
    "upper": 61,
    "value": 53,
    "volume": 1478,
    "width": 3.6999999999999997,
    "z": 9.4
  },
  {
    "base": 39.78,
    "category": "Mar",
    "close": 51,
    "conversion": 22.16,
    "date": "2026-03-01",
    "direction": 90,
    "down": 74.6,
    "high": 59,
    "low": 45,
    "lower": 44,
    "magnitude": 11.8,
    "minus": 36.8,
    "open": 53,
    "plus": 27.2,
    "previous": 53,
    "price": 77.85,
    "radius": 21.22,
    "resistance": 60,
    "secondary": 46.2,
    "series": "Before launch",
    "signal": 51.82,
    "speed": 23.4,
    "support": 43,
    "target": 59.2,
    "title": "Spring release",
    "up": 58.8,
    "upper": 60,
    "value": 51,
    "volume": 1706,
    "width": 4.6,
    "z": 10.8
  },
  {
    "base": 46.02,
    "category": "Apr",
    "close": 59,
    "conversion": 23.4,
    "date": "2026-04-01",
    "direction": 121,
    "down": 72.9,
    "high": 65,
    "low": 55,
    "lower": 54,
    "magnitude": 14.2,
    "minus": 35.7,
    "open": 51,
    "plus": 28.8,
    "previous": 51,
    "price": 78.81,
    "radius": 22.98,
    "resistance": 68,
    "secondary": 48,
    "series": "Before launch",
    "signal": 59.48,
    "speed": 26.1,
    "support": 51,
    "target": 63.8,
    "title": "",
    "up": 61.2,
    "upper": 66,
    "value": 59,
    "volume": 1724,
    "width": 5.5,
    "z": 12.2
  },
  {
    "base": 51.48,
    "category": "May",
    "close": 66,
    "conversion": 23.95,
    "date": "2026-05-01",
    "direction": 152,
    "down": 71.2,
    "high": 73,
    "low": 61,
    "lower": 60,
    "magnitude": 16.6,
    "minus": 34.6,
    "open": 59,
    "plus": 30.4,
    "previous": 59,
    "price": 78.47,
    "radius": 24.52,
    "resistance": 75,
    "secondary": 48.17,
    "series": "Before launch",
    "signal": 66.24,
    "speed": 28.8,
    "support": 58,
    "target": 68.4,
    "title": "",
    "up": 63.6,
    "upper": 74,
    "value": 66,
    "volume": 1952,
    "width": 2.8,
    "z": 13.6
  },
  {
    "base": 54.6,
    "category": "Jun",
    "close": 70,
    "conversion": 24.03,
    "date": "2026-06-01",
    "direction": 183,
    "down": 69.5,
    "high": 78,
    "low": 64,
    "lower": 63,
    "magnitude": 7,
    "minus": 33.5,
    "open": 66,
    "plus": 32,
    "previous": 66,
    "price": 77.63,
    "radius": 25.4,
    "resistance": 79,
    "secondary": 48.47,
    "series": "Before launch",
    "signal": 70.3,
    "speed": 31.5,
    "support": 62,
    "target": 73,
    "title": "",
    "up": 66,
    "upper": 79,
    "value": 70,
    "volume": 2180,
    "width": 3.6999999999999997,
    "z": 15
  },
  {
    "base": 59.28,
    "category": "Jul",
    "close": 76,
    "conversion": 24.01,
    "date": "2026-07-01",
    "direction": 214,
    "down": 67.8,
    "high": 82,
    "low": 72,
    "lower": 71,
    "magnitude": 9.4,
    "minus": 32.4,
    "open": 70,
    "plus": 33.6,
    "previous": 70,
    "price": 77.31,
    "radius": 26.72,
    "resistance": 85,
    "secondary": 50.62,
    "series": "After launch",
    "signal": 76.16,
    "speed": 34.2,
    "support": 68,
    "target": 77.6,
    "title": "",
    "up": 68.4,
    "upper": 83,
    "value": 76,
    "volume": 2198,
    "width": 4.6,
    "z": 16.4
  },
  {
    "base": 63.96,
    "category": "Aug",
    "close": 82,
    "conversion": 24.31,
    "date": "2026-08-01",
    "direction": 245,
    "down": 66.1,
    "high": 89,
    "low": 77,
    "lower": 76,
    "magnitude": 11.8,
    "minus": 31.299999999999997,
    "open": 76,
    "plus": 35.2,
    "previous": 76,
    "price": 78.31,
    "radius": 28.04,
    "resistance": 91,
    "secondary": 55.17,
    "series": "After launch",
    "signal": 82.02,
    "speed": 36.900000000000006,
    "support": 74,
    "target": 82.2,
    "title": "",
    "up": 70.8,
    "upper": 90,
    "value": 82,
    "volume": 2426,
    "width": 5.5,
    "z": 17.799999999999997
  },
  {
    "base": 62.4,
    "category": "Sep",
    "close": 80,
    "conversion": 25.21,
    "date": "2026-09-01",
    "direction": 276,
    "down": 64.4,
    "high": 88,
    "low": 74,
    "lower": 73,
    "magnitude": 14.2,
    "minus": 30.2,
    "open": 82,
    "plus": 36.8,
    "previous": 82,
    "price": 80.78,
    "radius": 27.6,
    "resistance": 89,
    "secondary": 61.27,
    "series": "After launch",
    "signal": 80.68,
    "speed": 39.6,
    "support": 72,
    "target": 86.8,
    "title": "Team plan launch",
    "up": 73.2,
    "upper": 89,
    "value": 80,
    "volume": 2444,
    "width": 2.8,
    "z": 19.2
  },
  {
    "base": 69.42,
    "category": "Oct",
    "close": 89,
    "conversion": 26.8,
    "date": "2026-10-01",
    "direction": 307,
    "down": 62.7,
    "high": 95,
    "low": 85,
    "lower": 84,
    "magnitude": 16.6,
    "minus": 29.1,
    "open": 80,
    "plus": 38.4,
    "previous": 80,
    "price": 84.2,
    "radius": 29.580000000000002,
    "resistance": 98,
    "secondary": 67.07,
    "series": "After launch",
    "signal": 89.24,
    "speed": 42.3,
    "support": 81,
    "target": 91.4,
    "title": "",
    "up": 75.6,
    "upper": 96,
    "value": 89,
    "volume": 2672,
    "width": 3.6999999999999997,
    "z": 20.6
  },
  {
    "base": 74.88,
    "category": "Nov",
    "close": 96,
    "conversion": 28.94,
    "date": "2026-11-01",
    "direction": 338,
    "down": 61,
    "high": 103,
    "low": 91,
    "lower": 90,
    "magnitude": 7,
    "minus": 28,
    "open": 89,
    "plus": 40,
    "previous": 89,
    "price": 87.6,
    "radius": 31.12,
    "resistance": 105,
    "secondary": 70.96,
    "series": "After launch",
    "signal": 96,
    "speed": 45,
    "support": 88,
    "target": 96,
    "title": "",
    "up": 78,
    "upper": 104,
    "value": 96,
    "volume": 2900,
    "width": 4.6,
    "z": 22
  },
  {
    "base": 81.12,
    "category": "Dec",
    "close": 104,
    "conversion": 31.27,
    "date": "2026-12-01",
    "direction": 9,
    "down": 59.3,
    "high": 112,
    "low": 98,
    "lower": 97,
    "magnitude": 9.4,
    "minus": 26.9,
    "open": 96,
    "plus": 41.6,
    "previous": 96,
    "price": 90.01,
    "radius": 32.879999999999995,
    "resistance": 113,
    "secondary": 72.44,
    "series": "After launch",
    "signal": 103.66,
    "speed": 47.7,
    "support": 96,
    "target": 100.6,
    "title": "",
    "up": 80.4,
    "upper": 113,
    "value": 104,
    "volume": 2918,
    "width": 5.5,
    "z": 23.4
  }
];

const options = {
  "accessibility": {
    "description": "Monthly active teams compared with the operating target. The example uses curated, deterministic data and exposes its exact values in a semantic table.",
    "label": "Combo chart: Monthly active teams compared with the operating target"
  },
  "annotations": [
    {
      "connector": {
        "visible": true
      },
      "detail": "데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다.",
      "id": "manual-callout",
      "placement": "auto",
      "style": {
        "maxWidth": 220,
        "padding": 8
      },
      "target": {
        "field": "category",
        "type": "datum",
        "value": "Jul"
      },
      "text": "포인트·범위 하이라이트 · Jul"
    }
  ],
  "axes": {
    "x": {
      "labels": {
        "orientation": "horizontal"
      },
      "position": "bottom"
    },
    "y": {
      "format": {
        "currency": "KRW",
        "currencyDisplay": "narrowSymbol",
        "fractionDigits": 0,
        "notation": "compact",
        "type": "currency"
      },
      "position": "left",
      "title": {
        "padding": 58,
        "text": "Revenue (KRW)"
      }
    },
    "y2": {
      "format": {
        "fractionDigits": 1,
        "type": "percent"
      },
      "offset": 8,
      "position": "right",
      "title": {
        "padding": 58,
        "text": "Margin rate"
      }
    }
  },
  "create": {
    "adaptive": {
      "profiles": "auto"
    }
  },
  "height": 620,
  "highlights": [
    {
      "id": "manual-focus",
      "padding": 7,
      "target": {
        "field": "category",
        "type": "datum",
        "value": "Jul"
      }
    }
  ],
  "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": true,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "playback": {
      "autoplay": false,
      "field": "period",
      "filter": true,
      "interval": 1000,
      "key": "period",
      "loop": false,
      "mode": "cumulative",
      "rate": 1,
      "transition": {
        "duration": 600,
        "easing": "ease-in-out"
      },
      "windowSize": 1
    },
    "selection": {
      "ariaLabel": "대화형 선택",
      "clearOnBackground": true,
      "clearOnEscape": true,
      "highlight": {
        "padding": 5
      },
      "key": "category",
      "mode": "multiple",
      "toggle": true
    },
    "tooltip": {
      "axis": "x",
      "fields": [
        {
          "field": "period",
          "format": "auto",
          "label": "기간"
        },
        {
          "field": "revenue",
          "format": "number",
          "fractionDigits": 0,
          "label": "매출",
          "prefix": "₩"
        },
        {
          "field": "marginRate",
          "format": "percent",
          "fractionDigits": 1,
          "label": "이익률"
        }
      ],
      "title": "Combination",
      "trigger": "axis"
    }
  },
  "layers": [
    {
      "id": "volume",
      "mark": {
        "opacity": 0.72,
        "type": "bar"
      },
      "x": {
        "field": "category",
        "scale": {
          "domain": [
            "Q1",
            "Q2",
            "Q3",
            "Q4"
          ]
        },
        "title": "Month",
        "type": "ordinal"
      },
      "y": {
        "field": "target",
        "scale": {
          "domain": [
            0,
            200000000
          ]
        },
        "title": "Active teams",
        "type": "quantitative"
      }
    },
    {
      "id": "actual",
      "mark": {
        "point": true,
        "type": "line"
      },
      "x": {
        "field": "category",
        "scale": {
          "domain": [
            "Q1",
            "Q2",
            "Q3",
            "Q4"
          ]
        },
        "title": "Month",
        "type": "ordinal"
      },
      "y": {
        "field": "value",
        "scale": {
          "domain": [
            0,
            0.3
          ]
        },
        "title": "Active teams",
        "type": "quantitative"
      }
    }
  ],
  "legend": {
    "interactive": true,
    "items": [
      {
        "id": "volume",
        "label": "Volume",
        "layerId": "volume"
      },
      {
        "id": "actual",
        "label": "Actual",
        "layerId": "actual"
      }
    ],
    "labels": {
      "hide": "숨기기",
      "show": "표시"
    },
    "maxItems": 8,
    "mode": "layers",
    "orientation": "horizontal",
    "position": "bottom",
    "title": "Combination",
    "visible": true
  },
  "locale": "ko",
  "padding": {
    "bottom": 58,
    "left": 86,
    "right": 94,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Monthly active teams compared with the operating target",
    "text": "Combo chart"
  },
  "width": "container"
};

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

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "Monthly active teams compared with the operating target. The example uses curated, deterministic data and exposes its exact values in a semantic table.",
    "label": "Combo chart: Monthly active teams compared with the operating target"
  },
  "annotations": [
    {
      "connector": {
        "visible": true
      },
      "detail": "데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다.",
      "id": "manual-callout",
      "placement": "auto",
      "style": {
        "maxWidth": 220,
        "padding": 8
      },
      "target": {
        "field": "category",
        "type": "datum",
        "value": "Jul"
      },
      "text": "포인트·범위 하이라이트 · Jul"
    }
  ],
  "axes": {
    "x": {
      "labels": {
        "orientation": "horizontal"
      },
      "position": "bottom"
    },
    "y": {
      "format": {
        "currency": "KRW",
        "currencyDisplay": "narrowSymbol",
        "fractionDigits": 0,
        "notation": "compact",
        "type": "currency"
      },
      "position": "left",
      "title": {
        "padding": 58,
        "text": "Revenue (KRW)"
      }
    },
    "y2": {
      "format": {
        "fractionDigits": 1,
        "type": "percent"
      },
      "offset": 8,
      "position": "right",
      "title": {
        "padding": 58,
        "text": "Margin rate"
      }
    }
  },
  "create": {
    "adaptive": {
      "profiles": "auto"
    }
  },
  "height": 620,
  "highlights": [
    {
      "id": "manual-focus",
      "padding": 7,
      "target": {
        "field": "category",
        "type": "datum",
        "value": "Jul"
      }
    }
  ],
  "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": true,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "playback": {
      "autoplay": false,
      "field": "period",
      "filter": true,
      "interval": 1000,
      "key": "period",
      "loop": false,
      "mode": "cumulative",
      "rate": 1,
      "transition": {
        "duration": 600,
        "easing": "ease-in-out"
      },
      "windowSize": 1
    },
    "selection": {
      "ariaLabel": "대화형 선택",
      "clearOnBackground": true,
      "clearOnEscape": true,
      "highlight": {
        "padding": 5
      },
      "key": "category",
      "mode": "multiple",
      "toggle": true
    },
    "tooltip": {
      "axis": "x",
      "fields": [
        {
          "field": "period",
          "format": "auto",
          "label": "기간"
        },
        {
          "field": "revenue",
          "format": "number",
          "fractionDigits": 0,
          "label": "매출",
          "prefix": "₩"
        },
        {
          "field": "marginRate",
          "format": "percent",
          "fractionDigits": 1,
          "label": "이익률"
        }
      ],
      "title": "Combination",
      "trigger": "axis"
    }
  },
  "layers": [
    {
      "id": "volume",
      "mark": {
        "opacity": 0.72,
        "type": "bar"
      },
      "x": {
        "field": "category",
        "scale": {
          "domain": [
            "Q1",
            "Q2",
            "Q3",
            "Q4"
          ]
        },
        "title": "Month",
        "type": "ordinal"
      },
      "y": {
        "field": "target",
        "scale": {
          "domain": [
            0,
            200000000
          ]
        },
        "title": "Active teams",
        "type": "quantitative"
      }
    },
    {
      "id": "actual",
      "mark": {
        "point": true,
        "type": "line"
      },
      "x": {
        "field": "category",
        "scale": {
          "domain": [
            "Q1",
            "Q2",
            "Q3",
            "Q4"
          ]
        },
        "title": "Month",
        "type": "ordinal"
      },
      "y": {
        "field": "value",
        "scale": {
          "domain": [
            0,
            0.3
          ]
        },
        "title": "Active teams",
        "type": "quantitative"
      }
    }
  ],
  "legend": {
    "interactive": true,
    "items": [
      {
        "id": "volume",
        "label": "Volume",
        "layerId": "volume"
      },
      {
        "id": "actual",
        "label": "Actual",
        "layerId": "actual"
      }
    ],
    "labels": {
      "hide": "숨기기",
      "show": "표시"
    },
    "maxItems": 8,
    "mode": "layers",
    "orientation": "horizontal",
    "position": "bottom",
    "title": "Combination",
    "visible": true
  },
  "locale": "ko",
  "padding": {
    "bottom": 58,
    "left": 86,
    "right": 94,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Monthly active teams compared with the operating target",
    "text": "Combo chart"
  },
  "width": "container"
}
차트 카탈로그