Usuń wyściółkę lub marże od Google Charts

Question

// Load the Visualization API and the piechart package. 
 
google.load('visualization', '1.0', {'packages':['corechart']}); 
 

 
// Set a callback to run when the Google Visualization API is loaded. 
 
google.setOnLoadCallback(drawChart); 
 

 
// Callback that creates and populates a data table, 
 
// instantiates the pie chart, passes in the data and 
 
// draws it. 
 
function drawChart() { 
 

 
    // Create the data table. 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Topping'); 
 
    data.addColumn('number', 'Slices'); 
 

 
    var myData = { 
 
    'Mushrooms': 3, 
 
    'Onions': 1, 
 
    'Olives': 1, 
 
    'Zucchini': 1, 
 
    'Pepperoni': 2 
 
    }; 
 

 
    var rows = []; 
 
    for (element in myData) { 
 
     rows.push([element + " (" + myData[element] + ")", myData[element]]) 
 
    } 
 
    data.addRows(rows); 
 

 
    // Set chart options 
 
    var options = {'title':'How Much Pizza I Ate Last Night', 
 
       'width':450, 
 
       'height':300}; 
 

 
    // Instantiate and draw our chart, passing in some options. 
 
    var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 

 
<div id="chart_div"></div>

Example fiddle

Jak zdjąć obicie lub marginesy w tym przykładzie?

Answer 1

Dodając i dostosowując niektóre opcje konfiguracji wymienione w API documentation, można utworzyć wiele różnych stylów. Na przykład, here is a version który usuwa większość dodatkowej pustej przestrzeni przez ustawienie chartArea.width do 100% i chartArea.height do 80% i przesuwając legend.position do dolny:

// Set chart options 
var options = {'title': 'How Much Pizza I Ate Last Night', 
       'width': 350, 
       'height': 400, 
       'chartArea': {'width': '100%', 'height': '80%'}, 
       'legend': {'position': 'bottom'} 
    }; 

Jeśli chcesz dostroić go więcej, spróbuj zmienić te wartości lub użyj innych właściwości z powyższego linku.

Answer 2

Jestem dość późno, ale każdy użytkownik szukający tego może uzyskać pomoc. Wewnątrz opcji możesz podać nowy parametr o nazwie chartArea.

 var options = { 
     chartArea:{left:10,top:20,width:"100%",height:"100%"} 
    }; 

Opcje lewy i górny określają wielkość wypełnienia od lewej do góry. Mam nadzieję, że to pomoże.

Answer 3

Istnieje taka możliwość like Aman Virk mentioned:

var options = { 
    chartArea:{left:10,top:20,width:"100%",height:"100%"} 
}; 

Należy jednak pamiętać, że wyściółka i margines nie są tam przeszkadza. Jeśli masz możliwość przełączania się między różnymi typami wykresów, na przykład ColumnChart i ten z pionowymi kolumnami, potrzebujesz trochę marginesu na wyświetlanie etykiet tych linii.

Jeśli usuniesz ten margines, skończy się pokazywanie tylko części etykiet lub brak etykiet.

Jeśli masz tylko jeden typ wykresu, możesz zmienić margines i wypełnienie, tak jak powiedział Arman. Ale jeśli można to zmienić, nie zmieniaj ich.

Answer 4

Przybyłem tutaj jak większość ludzi z tym samym problemem i zostawiłem zszokowany, że żadna odpowiedź nawet nie działa.

Dla wszystkich zainteresowanych, tutaj jest rzeczywista rozwiązanie:

... //rest of options 
width: '100%', 
height: '350', 
chartArea:{ 
    left:5, 
    top: 20, 
    width: '100%', 
    height: '350', 
} 
... //rest of options 

Kluczem tutaj jest nic do czynienia z „lewy” lub „top” wartości. Ale raczej, że:

Wymiary zarówno wykresu i wykresu strefy są ustawione i ustawić na taką samą wartość

jako poprawka do mojej odpowiedzi. Powyższe rozwiązanie rzeczywiście rozwiąże "nadmierny" problem padding/margin/whitespace.Jeśli jednak chcesz, aby zawierały etykiety osi i/lub legendę, musisz zmniejszyć szerokość obszaru mapy o około &, więc coś nieco poniżej zewnętrznej szerokości/wysokości. Spowoduje to "przekazanie" interfejsu API wykresu, że istnieje wystarczająca przestrzeń do wyświetlenia tych właściwości. W przeciwnym razie z przyjemnością je wykluczy.

Answer 5

Brakuje w docs (używam wersji 43), ale rzeczywiście można korzystać z dolną właściwość obszaru wykresu prawo i :

var options = { 
    chartArea:{ 
    left:10, 
    right:10, // !!! works !!! 
    bottom:20, // !!! works !!! 
    top:20, 
    width:"100%", 
    height:"100%" 
    } 
}; 

Więc to jest możliwe wykorzystanie pełnego responsywna szerokość & wysokość i zapobiega przycinaniu etykiet osi lub legend.