Удалить отступы или поля из 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

Как удалить заполнение или поля в этом примере?

Answer 1

Добавляя и настраивая некоторые параметры конфигурации, перечисленные в API documentation, вы можете создавать множество разных стилей. Например, here is a version, который удаляет большую часть дополнительного пустого пространства, установив chartArea.width на 100% и chartArea.height до 80% и перемещение legend.position к нижней:

// 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'} 
    }; 

Если вы хотите, чтобы настроить его более того, попробуйте изменить эти значения или использовать другие свойства из приведенной выше ссылки.

Answer 2

Я довольно поздно, но любой пользователь, который ищет это, может получить от него помощь. Внутри параметров вы можете передать новый параметр: chartArea.

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

В левом и верхнем вариантах указывается количество отступов слева и сверху. Надеюсь, это поможет.

Answer 3

Существует такая возможность like Aman Virk mentioned:

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

Но имейте в виду, что заполнение и запас не там беспокоить вас. Если у вас есть возможность переключаться между различными типами диаграмм, такими как ColumnChart, и с вертикальными столбцами, то вам нужно некоторое поле для отображения меток этих строк.

Если вы заберете эту маржу, вы в конечном итоге покажете только часть ярлыков или никаких меток.

Итак, если у вас только один тип диаграммы, вы можете изменить маржу и отступы, как сказал Арман. Но если их можно переключить, не меняйте их.

Answer 4

Я приехал сюда, как и большинство людей с этой же проблемой, и оставил в шоке, что ни один из ответов даже не работал удаленно.

Для тех, кто заинтересован, вот реальное решение:

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

Ключ здесь не имеет ничего делать с «левых» или «сверху» значения. Но вместо того, что:

Размеры как диаграммы и штурманской области УСТАНОВЛЕНЫ и установить на то же значение

В качестве поправки к моему ответу. Вышеизложенное действительно решит проблему «чрезмерного» заполнения/поля/пробела.Однако, если вы хотите, чтобы включал метки осей и/или легенду, вам необходимо уменьшить высоту ширины области диаграммы так, чтобы что-то немного ниже внешней ширины/высоты. Это «скажет» API диаграмм, что есть достаточно места для отображения этих свойств. В противном случае они будут счастливо исключать их.

Answer 5

Это отсутствует в документации (я использую версию 43), но вы можете использовать право и нижний свойства области диаграммы:

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

Так что можно использовать полный чувствительная ширина & Высота и предотвращение обрезки любых меток или легенд.