如何隱藏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屬性，這應該是對應於現有片索引的陣列提供的切片。如果設置了hiddenSlices，則使用hideSlicesPlugin,將切片隱藏在所有數據集中。