Sparkline Chart

PRO

작은 공간에 수치의 흐름과 변화를 요약합니다.

<sy-sparkline-chart>설치 안내 기본 사용법

Live preview

컴포넌트를 조작하면 여기에 결과가 표시됩니다.

코드 보기

HTML

<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="최근 8일 작업 완료 추이"
  font-color="currentColor"
  type="line"
  show-points
  interactive
  show-tooltip
  thickness="2"
  id="sample"
></sy-sparkline-chart>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "values": [
      12,
      18,
      14,
      26,
      22,
      30,
      27,
      36
    ]
  });
</script>

사용 가이드

표·카드 안에서 작은 추세를 요약합니다. 축·범례로 자세히 읽어야 하는 시각화는 Charts를 사용하세요.

일반 수치

values에 숫자 배열을 넣고 type의 line·area·column·pie를 선택합니다.

주가 데이터

stock은 숫자 배열 대신 open·high·low·close를 가진 객체 배열을 사용합니다.

의미와 탐색: label로 데이터의 의미를 설명하고 interactive·showTooltip으로 탐색을 허용합니다.
실시간 값 추가: stream은 초기 배열 길이를 유지합니다. addValue()로 추가하면 가장 오래된 값이 빠집니다.

예제

선과 면

숫자 배열의 흐름을 간결하게 표현합니다.

코드 보기

HTML

<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="최근 8일 작업 완료 추이"
  font-color="currentColor"
  type="area"
  smooth
  show-points
  id="sample"
></sy-sparkline-chart>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "values": [
      12,
      18,
      14,
      26,
      22,
      30,
      27,
      36
    ]
  });
</script>

막대

각 구간의 크기를 비교합니다.

코드 보기

HTML

<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="최근 8일 작업 완료 추이"
  font-color="currentColor"
  type="column"
  id="sample"
></sy-sparkline-chart>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "values": [
      12,
      18,
      14,
      26,
      22,
      30,
      27,
      36
    ]
  });
</script>

비율

전체에서 각 값이 차지하는 비율입니다.

코드 보기

HTML

<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="최근 8일 작업 완료 추이"
  font-color="currentColor"
  type="pie"
  id="sample"
></sy-sparkline-chart>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "values": [
      12,
      18,
      14,
      26,
      22,
      30,
      27,
      36
    ]
  });
</script>

OHLC

시가·고가·저가·종가를 주가형으로 표시합니다.

코드 보기

HTML

<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="최근 8일 작업 완료 추이"
  font-color="currentColor"
  type="stock"
  id="sample"
></sy-sparkline-chart>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "values": [{
        "open": 12,
        "high": 20,
        "low": 9,
        "close": 18
      },
      {
        "open": 18,
        "high": 22,
        "low": 12,
        "close": 14
      },
      {
        "open": 14,
        "high": 28,
        "low": 13,
        "close": 25
      },
      {
        "open": 25,
        "high": 30,
        "low": 20,
        "close": 23
      }
    ]
  });
</script>

값 갱신과 선택

추가·수정·제거 결과와 현재 배열을 확인합니다.

코드 보기

HTML

<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="최근 8일 작업 완료 추이"
  font-color="currentColor"
  id="sample"
></sy-sparkline-chart>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">값 추가</sy-button>
  <sy-button id="action-1" size="small">첫 값 수정</sy-button>
  <sy-button id="action-2" size="small">첫 값 제거</sy-button>
  <sy-button id="action-3" size="small">값 조회</sy-button>
  <sy-button id="action-4" size="small">세 번째 선택</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "values": [
      12,
      18,
      14,
      26,
      22,
      30,
      27,
      36
    ]
  });
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.addValue(42);
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.updateValue(0, 20);
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget2 = document.querySelector("#sample");
  document.querySelector('#action-2').addEventListener('click', async () => {
    const result = await actionTarget2.removeValue(0);
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget3 = document.querySelector("#sample");
  document.querySelector('#action-3').addEventListener('click', async () => {
    const result = await actionTarget3.getValues();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget4 = document.querySelector("#sample");
  document.querySelector('#action-4').addEventListener('click', async () => {
    const result = await actionTarget4.setActiveIndex(2);
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

일정 개수 유지

값을 추가하면 가장 오래된 값이 빠집니다.

코드 보기

HTML

<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="최근 8일 작업 완료 추이"
  font-color="currentColor"
  stream
  id="sample"
></sy-sparkline-chart>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">새 값 추가</sy-button>
  <sy-button id="action-1" size="small">값 조회</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "values": [
      12,
      18,
      14,
      26,
      22,
      30,
      27,
      36
    ]
  });
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.addValue(40);
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.getValues();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

이벤트와 전달 값

컴포넌트를 조작하고 최근 이벤트의 이름과 detail 값을 확인하세요. 코드에는 이 컴포넌트와 하위 구성 요소가 보내는 이벤트의 구독 방법이 모두 포함되어 있습니다.

코드 보기

HTML

<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="최근 8일 작업 완료 추이"
  font-color="currentColor"
  type="line"
  show-points
  interactive
  show-tooltip
  thickness="2"
  id="sample"
></sy-sparkline-chart>
<output id="demo-events" aria-live="polite">컴포넌트를 조작하면 최근 이벤트와 전달 값이 표시됩니다.
</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "values": [
      12,
      18,
      14,
      26,
      22,
      30,
      27,
      36
    ]
  });
  for (const name of ["pointSelected", "pointFocused", "valueAdded", "valueUpdated",
    "valueRemoved"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

수치 형식 바꾸기

formatter(value, index)로 값과 툴팁을 원하는 단위로 표현합니다. 배열·함수는 HTML 문자열이 아닌 JavaScript 프로퍼티로 전달하세요.

코드 보기

HTML

<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="최근 8일 작업 완료 추이"
  font-color="currentColor"
  type="line"
  show-points
  show-value
  interactive
  show-tooltip
  thickness="2"
  id="sample"
></sy-sparkline-chart>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "values": [
      12,
      18,
      14,
      26,
      22,
      30,
      27,
      36
    ]
  });
  const component2 = document.querySelector("#sample");
  Object.assign(component2, {
    "showValue": true,
    "showTooltip": true
  });
  await (root => {
    root.querySelector('sy-sparkline-chart').formatter = (value, index) => _msg("m_5a917878dda1",
      [index + 1, value.toLocaleString()]);
  })(document);
</script>

주가 색상 규칙 전환

같은 OHLC 데이터에서 미국식과 한국식 상승·하락 색상을 전환합니다.

코드 보기

HTML

<sy-sparkline-chart
  type="stock"
  width="300"
  height="100"
  id="sample"
></sy-sparkline-chart>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">미국식 색상</sy-button>
  <sy-button id="action-1" size="small">한국식 색상</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "values": [{
        "open": 10,
        "high": 16,
        "low": 9,
        "close": 14
      },
      {
        "open": 14,
        "high": 15,
        "low": 10,
        "close": 11
      },
      {
        "open": 11,
        "high": 17,
        "low": 10,
        "close": 16
      }
    ]
  });
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.setStockColorScheme("us");
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.setStockColorScheme("kr");
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

고정된 값 범위

세로 범위를 0부터 100까지 고정하고 마지막 값을 표시합니다.

코드 보기

HTML

<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="최근 8일 작업 완료 추이"
  font-color="currentColor"
  type="line"
  show-value
  interactive
  show-tooltip
  thickness="2"
  min="0"
  max="100"
  id="sample"
></sy-sparkline-chart>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "values": [
      12,
      18,
      14,
      26,
      22,
      30,
      27,
      36
    ]
  });
  const component2 = document.querySelector("#sample");
  Object.assign(component2, {
    "type": "line",
    "min": 0,
    "max": 100,
    "showPoints": false,
    "showValue": true
  });
</script>

기능별 예제

32개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.