chartjs-plugin-datalabels 그래프 모든 라벨 동시에 표시

CharJS 의 사용법과 옵션은 www.chartjs.org 에 가면 다 나옵니다.. 참고 바랍니다. ^^;

 

여기서 다룰 것은,

chartjs 에서는 툴팁이 마우스 커서를 올려야(hover) 표시되는데..

모바일 기기에서는 이게 안 되잖아요.

 

그러니 차트가 그려질 때, 숫자가 모두 보여져야 한다는 거구요.

이걸 해결하기 위해 chartjs 용 플러그인으로 datalabels 를 사용하는 겁니다.

 

일단 chartjs-plugin-datalabels.netlify.app 를 방문해서 참고하시고..

datalabels 플러그인을 세팅하면 그래프 안에 수치가 주욱 들어갑니다.

 

그런데, data set 에는 수치로만 넣어야 하기 때문에..

수치에 대한 단위라든가, 천자리 쉼표 처리는 datalbels 의 formatter 라는 것을 사용합니다.

글자도 작으니까 좀더 크게 세팅해야 하구요.

 

참고 세팅은 아래와 같습니다.

 

var chart = new Chart(ctx, {

  ...,

  plugins:[ChartDataLabels], // 이거 그대로 복사해서 붙여 넣으세요.. ^^;

  data:{

    datasets: [{

      data: ...,

      datalabels:{

        color:'black',         // 너무 흐리다 싶어서 잘 보이도록 완전히 검게..

                                // 배경색을 어떻게 세팅했냐에 따라 적절히..

        font:{size:24}        // pixel 단위이고, 수치로 입력

      }

    }],

    labels:[ ... 여기에 화면에 표시되는 라벨을 세팅 .. ] // formatter 의 context.chart.data.labels[idx]

  },

  ...,

  options:{

    plugins:{

      datalabels:{

        formatter:function(value,context){

          // data 에 넣은 데이타 순번. 물론 0 부터 시작

          var idx = context.dataIndex;

 

          // 여기선 첫번째 데이타엔 단위를 '원' 으로, 그 다음 데이타엔 'P' 를 사용

          // addComma() 는 여기서 기술하지 않았지만, 천단위 세팅. ChartJS 의 data 엔 숫자만 입력

          return context.chart.data.labels[idx]+ ' ' +addComma(value)+ (idx==0 ? '원' : 'P');

        }

      }

    }

  }

};

 

 

 

그런데, 도넛 그래프의 경우..

값이 0 이거나, 다른 항목에 비해 상대적으로 극미한 값인 경우..

canvas 경계선에서 해당 라벨이 잘려지는 상황이 발생하는데,

이 때에는.. 아래와 같이 해 줍니다. (다른 옵션으로도 가능하긴 하겠지만..)

...

  options:{

    plugins:{

      datalabels:{

        align:'top',

...

 

.fine.