Chart.js에서 사용자 범례에 기존 범례기능(누르면 숨김/보이기 토글) 넣기

※ 해당 글은 아래 글과 연결되어 있습니다.

혹시 잘 안되거나 이해 안 되는 부분이 있으시면 아래 글을 참조하여 주세요.

http://risha-lee.tistory.com/18?category=764955

 

 

 

앞서 말했다시피 사용자 범례를 이전 글처럼 만들기만 해서는 

위 그림처럼 범례 클릭 시 해당 데이터셋의 숨김/보이기 토글 기능을 사용할 수 없다.

 

해당 기능을 만들려면 이전 글의 코드에 다음과 같이 추가로 코드를 작성해주어야 한다.

 

<script>
	 window.onload = function() {
		$("#chartLegend li").click(function(){
			updateDataset(event, $(this).attr("datasetIndex"), "theChart");
			if($(this).css("text-decoration").indexOf("line-through")<0){
				$(this).css("text-decoration", "line-through");
			} else{
				$(this).css("text-decoration", "none");
			}
		});
	 }

	 //범례 클릭시 해당 데이터셋이 숨김/보이기 토글 기능 함수
	 function updateDataset(e, datasetIndex, chartId) {
		var index = datasetIndex;
		var ci = e.view[chartId];
		var meta = ci.getDatasetMeta(index);
		var scaleList = ci.options.scales["yAxes"];
        
		meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;
		ci.update();
	 }
</script>

 

참고 : https://github.com/chartjs/Chart.js/issues/2565