[Chart.js] 차트의 datalabels에 아이콘 넣기

 

 

 

 

 

---

 

 

 

1. 쉽게 사용할 수 있도록 전역변수를 설정해준다.

Fontello - icon fonts generator

 

fontello를 사용하여 구현할 것이라 원하는 유니코드를 가져와서 구성하면 된다. (FontAwesome도 사용 가능)

export enum Icon {
  'EXCLAMATION' = 'EXCLAMATION',
  'CHECK' = 'CHECK',
  'BELL' = 'BELL',
  'FLAG' = 'FLAG',
  'STAR' = 'STAR',
  'BOOKMARK' = 'BOOKMARK',
  'SIREN' = 'SIREN',
  'ALERT' = 'ALERT',
}

export const widgetIconList = ref([
  {
    type: Icon.EXCLAMATION,
    unicode: '\ue804',
    name: '왕관',
  },
  {
    type: Icon.CHECK,
    unicode: '\ue803',
    name: '체크',
  },
  {
    type: Icon.BELL,
    unicode: '\ue802',
    name: '종',
  },
  {
    type: Icon.FLAG,
    unicode: '\ue805',
    name: '깃발',
  },
  {
    type: Icon.STAR,
    unicode: '\ue807',
    name: '별',
  },
  {
    type: Icon.BOOKMARK,
    unicode: '\ue801',
    name: '북마크',
  },
  {
    type: Icon.SIREN,
    unicode: '\ue806',
    name: '비상벨',
  },
  {
    type: Icon.ALERT,
    unicode: '\ue808',
    name: '느낌표',
  },
])

 

 

 

2. 사용해보기

font 옵션의 family에 'fontello'를 첫번째로 넣어주고, 데이터레이블 옵션에 formatter를 사용하여 해당 값을 리턴시킨다.

datalabels: {
  // 기타설정..
  font: {
    size: 14,
    weight: '400',
    family: ['fontello', 'Pretendard'],
  },
  formatter: function (value: any, context: any) {
    return ${icon[0].unicode}
  },
}

 

 

 

 

---

 

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.