Google Donut Chartのスライスを隠す

Question

Google Donut Chartを使用しています。私の場合は

、いつか私がデータをこのような場合には

{ 
    DATA_1: 10, 
    DATA_2: 15, 
    INVALID_DATA: 10000000 (Big Number) 
} 

の下にあります、私の有効なデータは、非常に薄い表示やグラフで表示されていないスライスです。

他のスライスを見やすくするために、特定のスライスを隠すオプションがGoogle Chartsにありますか？

INVALID_DATAで有効なデータを表示するには、INVALID_DATAスライスを隠すだけです。

Answer 1

がチャート自体にはオプションではないが、スライスを非表示にするDataView

で行うことができるが、残りのスライスのサイズ、隠されたスライス

から
相対スキューを回避することができません次の例では、カラムは、隠されたスライス次にオプションpieSliceText: 'value'が真の％を示すために使用される

と％を計算するために添加される

DataViewは元の値の列を非表示にするために使用され、大きなスライス、このことができます

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Data Type', 'Value'], 
 
     ['DATA_1', 10], 
 
     ['DATA_2', 15], 
 
     ['INVALID_DATA', 10000000] 
 
    ]); 
 

 
    var options = { 
 
     pieHole: 0.4, 
 
     pieSliceText: 'value', 
 
     theme: 'maximized', 
 
     height: 262, 
 
     width: 262, 
 
    }; 
 

 
    // get total -- sum 
 
    var dataGroup = google.visualization.data.group(
 
     data, 
 
     [{column: 0, type: 'string', modifier: function() {return '';}}], 
 
     [{column: 1, type: 'number', aggregation: google.visualization.data.sum}] 
 
    ); 
 

 
    var hideRows = []; 
 
    data.addColumn({type: 'number', label: '%'}); 
 
    for (var i = 0; i < data.getNumberOfRows(); i++) { 
 
     // set % value 
 
     data.setValue(i, 2, data.getValue(i, 1)/dataGroup.getValue(0, 1)); 
 

 
     // hide big # 
 
     if (data.getValue(i, 2) > .99) { 
 
     hideRows.push(i); 
 
     } 
 
    } 
 

 
    var numberFormat = new google.visualization.NumberFormat({ 
 
     pattern: '#,##0.00000 %' 
 
    }); 
 
    numberFormat.format(data, 2); 
 

 
    var dataView = new google.visualization.DataView(data); 
 
    dataView.hideColumns([1]); 
 
    dataView.hideRows(hideRows); 
 

 
    var pieChart = new google.visualization.PieChart(document.getElementById('pieChart_div')); 
 
    pieChart.draw(dataView, options); 
 

 
    var tableChart = new google.visualization.Table(document.getElementById('tableChart_div')); 
 
    tableChart.draw(data); 
 
    }, 
 
    packages: ['corechart', 'table'] 
 
});

div { 
 
    padding: 2px 2px 2px 2px; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="pieChart_div"></div> 
 
<div id="tableChart_div"></div>