Hide Slice in Google Donut-Diagramm

Question

Ich verwende Google Donut Chart.

In meinem Fall irgendwann werde ich unten Daten

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

In einem solchen Fall ist meine gültige Daten zeigt sehr dünn oder in Scheiben schneiden in den Charts nicht sichtbar.

Gibt es eine Option in Google Charts, bestimmte Slices zu verbergen, um andere Slices besser sichtbar zu machen?

Ich möchte gültige Daten zeigen Prozent mit INVALID_DATA, aber nur die INVALID_DATA Slice versteckt.

Answer 1

gibt es keine Optionen auf dem Chart selbst, sondern ein Stück versteckt mit einem DataView

getan werden, aber nicht vermeiden, dass der Größe des verbleibenden Scheiben Verzerren
in Bezug auf die versteckten Scheibe

in im folgenden Beispiel wird eine Spalte hinzugefügt, um die% mit der versteckten Scheibe

dann die Option pieSliceText: 'value' wird verwendet, um die Berechnung der wahren% zeigen

ein DataView wird verwendet, um die ursprüngliche Wert Spalte und die Zeile mit der großen Scheibe

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>