[Vue.js] Chart.js 로 그린 Doughnut Chart 에서 없는 데이터의 label 숨기기 (empty data label hide)

as-is

Vue-Chart.js 로 도넛차트를 그렸는데,

아니 멜론만 9개인데 위에 label 이 줄줄이 나올 필요가 있나? 싶어서 숨기는 방법에 대해서 찾아보다가 성공했다 !

to-be

 

핵심은 data 세팅할 때 값이 없으면 (나같은 경우는 0이면) undefined 로 세팅하는 것 !!! (null 세팅은 안된다 😅)

---

axios
  .post(...)
  .then(res => {
    let chartData = res.data;
    this.renderChart(
      {
        labels: [
          "바나나",
          "사과",
          "포도",
          "체리",
          "멜론",
          "수박",
          "참외"
        ],
        datasets: [
          {
            backgroundColor: [
              this.randomColors(), // 따로 정의한 method
              this.randomColors(),
              this.randomColors(),
              this.randomColors(),
              this.randomColors(),
              this.randomColors(),
              this.randomColors(),
            ],
            data: [
              chartData.bananaCount === 0 ? undefined : chartData.bananaCount,
              chartData.appleCount === 0 ? undefined : chartData.appleCount,
              chartData.GrapeCount === 0 ? undefined : chartData.GrapeCount,
              chartData.CherryCount === 0 ? undefined : chartData.CherryCount,
              chartData.MelonCount === 0 ? undefined : chartData.MelonCount,
              chartData.WaterMelonCount === 0 ? undefined : chartData.WaterMelonCount,
              chartData.orientalMelonCount === 0 ? undefined : chartData.orientalMelonCount
            ]
          }
        ]
      },
      option{}...
      )
  })