문서 › 상호작용과 내보내기

주석: 기준선과 구간

목표선, 평균선, 행사 기간 음영.

annotations 로 목표선(y), 특정 날짜 선(x), 기간이나 값 범위 음영(bands)을 그립니다. 선은 데이터 위에, 음영은 데이터 아래에 그려집니다. y 기준선은 축 범위에 포함되어 항상 보입니다.

움직이는 예제

이 예제의 코드

createChart('#chart', {
  type: 'line',
  title: '일별 매출',
  unit: '원',
  annotations: {
    y: [{ value: 3000000, label: '목표 300만', color: '#1baf7a' }],
    x: [{ value: '10.16', label: '앱 업데이트' }],
    bands: [{ from: '10.18', to: '10.20', label: '주말 할인' }],
  },
  data: {
    labels: ['10.14', '10.15', '10.16', '10.17', '10.18', '10.19', '10.20', '10.21'],
    series: [{ name: '매출', data: [2410000, 2650000, 2580000, 2990000, 3420000, 3610000, 3380000, 2870000] }],
  },
});

속성	설명
`y: [{ value, label?, color?, dashed? }]`	가로 기준선. 점선이 기본, `dashed: false` 면 실선
`x: [{ value, label?, color?, dashed? }]`	세로 선. `value` 는 라벨 문자열, 날짜, 숫자 중 x 축과 같은 것
`bands: [{ from, to, label?, color?, axis? }]`	음영. `axis` 기본은 `'x'`(기간), `'y'` 면 값 범위(정상 범위 등)