Chart.js 원형 차트의 섹션을 숨기는 방법

Question

Chart.js에서 맨 위에 레이블을 클릭하여 차트의 섹션을 숨길 수 있습니다. (picture of a pie chart with hidden section) 시작시 차트 섹션을 숨기고 싶습니다. 다른 유형의 차트에서는 데이터 집합 숨겨진 속성을 사용하지만 원형 차트 섹션은 데이터 집합과 일치하지 않습니다. 따라서 동일한 작업을 수행하면 필요한 섹션뿐만 아니라 전체 데이터 세트가 숨겨집니다.

(추가 정보 : 나는 여러 데이터 세트와 파이 차트를 사용) 내가 솔루션에 온 가장 가까운

이 코드입니다 :

  for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) { 
       meta = chart.getDatasetMeta(i); 
       meta.data[index].hidden = !meta.data[index].hidden; 
      } 

      chart.update(); 

또는 나는 generateLabels 기능을 덮어 쓸 수 있습니다.

더 나은 솔루션을 찾을 수있는 사람이 있습니까?

는

Answer 1

당신은 플러그인 here 아래로 구현을 볼 수 있습니다 감사합니다.

// A plugin that hides slices, given their indices, across all datasets. 
 
var hideSlicesPlugin = { 
 
    afterInit: function(chartInstance) { 
 
    // If `hiddenSlices` has been set. 
 
    if (chartInstance.config.data.hiddenSlices !== undefined) { 
 
     // Iterate all datasets. 
 
     for (var i = 0; i < chartInstance.data.datasets.length; ++i) { 
 
     // Iterate all indices of slices to be hidden. 
 
     chartInstance.config.data.hiddenSlices.forEach(function(index) { 
 
      // Hide this slice for this dataset. 
 
      chartInstance.getDatasetMeta(i).data[index].hidden = true; 
 
     }); 
 
     } 
 
     chartInstance.update(); 
 
    } 
 
    } 
 
}; 
 

 
Chart.pluginService.register(hideSlicesPlugin); 
 

 
var ctx = document.getElementById("myChart"); 
 

 
var myChart = new Chart(ctx, { 
 
    type: 'pie', 
 
    data: { 
 
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
 
    datasets: [{ 
 
     data: [15, 1, 1, 1, 45, 1], 
 
     backgroundColor: [ 
 
     'rgba(255, 99, 132, 0.2)', 
 
     'rgba(54, 162, 235, 0.2)', 
 
     'rgba(255, 206, 86, 0.2)', 
 
     'rgba(75, 192, 192, 0.2)', 
 
     'rgba(153, 102, 255, 0.2)', 
 
     'rgba(255, 159, 64, 0.2)' 
 
     ], 
 
     borderColor: [ 
 
     'rgba(255,99,132,1)', 
 
     'rgba(54, 162, 235, 1)', 
 
     'rgba(255, 206, 86, 1)', 
 
     'rgba(75, 192, 192, 1)', 
 
     'rgba(153, 102, 255, 1)', 
 
     'rgba(255, 159, 64, 1)' 
 
     ], 
 
     borderWidth: 1 
 
    }, { 
 
     data: [5, 1, 25, 10, 5, 1], 
 
     backgroundColor: [ 
 
     'rgba(255, 99, 132, 0.2)', 
 
     'rgba(54, 162, 235, 0.2)', 
 
     'rgba(255, 206, 86, 0.2)', 
 
     'rgba(75, 192, 192, 0.2)', 
 
     'rgba(153, 102, 255, 0.2)', 
 
     'rgba(255, 159, 64, 0.2)' 
 
     ], 
 
     borderColor: [ 
 
     'rgba(255,99,132,1)', 
 
     'rgba(54, 162, 235, 1)', 
 
     'rgba(255, 206, 86, 1)', 
 
     'rgba(75, 192, 192, 1)', 
 
     'rgba(153, 102, 255, 1)', 
 
     'rgba(255, 159, 64, 1)' 
 
     ], 
 
     borderWidth: 1 
 
    }], 
 
    // Hide the second (index = 1) and the fourth (index = 3) slice. 
 
    hiddenSlices: [1, 3] 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
 
<canvas id="myChart" width="400" height="400"></canvas>

기존의 슬라이스에 대응하는 인덱스 배열되어야 hiddenSlices 특성을 이용하여 제공되는 숨겨진 슬라이스

. 슬라이스는 hideSlicesPlugin, 을 사용하여 모든 데이터 세트에서 숨겨집니다. hiddenSlices으로 설정하면 슬라이스가 숨겨집니다.