Google 도넛 차트의 슬라이스 숨기기

Question

Google 도넛 차트를 사용하고 있습니다. 내 경우

, 언젠가 내가 데이터 같은 경우

{ 
    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>