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が設定されている場合）を使用して、すべてのデータセットに表示されません。