// 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>
Как мне удалить отступы или поля в этом примере?
javascript
html
charts
google-visualization
Пол Армдам
источник
источник
chartArea: {width: '70%', left: '30%'}
то мне удалось. Источник: code.google.com/p/google-visualization-api-issues/issues/…Ответы:
Добавляя и настраивая некоторые параметры конфигурации, перечисленные в документации API , вы можете создавать множество различных стилей. Например, вот версия , которая удаляет большую часть дополнительного пустого пространства путем установки
chartArea.width
на 100% иchartArea.height
на 80% и перемещениеlegend.position
в нижней части :Если вы хотите настроить его больше, попробуйте изменить эти значения или использовать другие свойства по ссылке выше.
источник
Я довольно поздно, но любой пользователь, который ищет это, может получить от него помощь. Внутри опций вы можете передать новый параметр с именем chartArea .
Параметры left и top будут определять количество отступов слева и сверху. Надеюсь, это поможет.
источник
Я прибыл сюда, как и большинство людей с такой же проблемой, и остался потрясен, что ни один из ответов, даже удаленно, не работал.
Для тех, кто заинтересован, вот актуальное решение:
Ключ здесь не имеет никакого отношения к «левым» или «верхним» значениям. А скорее что:
Как поправка к моему ответу. Вышесказанное действительно решит проблему «чрезмерного» заполнения / отступа / пробела. Однако, если вы хотите включить метки осей и / или легенду, вам нужно уменьшить высоту и ширину области диаграммы, чтобы она была немного ниже внешней ширины / высоты. Это «скажет» API диаграммы, что для отображения этих свойств достаточно места. Иначе это с радостью исключит их.
источник
В документах его нет (я использую версию 43), но вы можете использовать свойство right и bottom области диаграммы:
Таким образом, можно использовать полную чувствительную ширину и высоту и предотвратить обрезание любых меток осей или легенд.
источник
Есть такая возможность, как упоминал Аман Вирк :
Но имейте в виду, что отступы и поля не должны вас беспокоить. Если у вас есть возможность переключаться между различными типами диаграмм, такими как ColumnChart, и диаграммой с вертикальными столбцами, вам понадобится поле для отображения меток этих линий.
Если вы уберете это поле, то в итоге вы увидите только часть ярлыков или вообще никаких ярлыков.
Так что, если у вас есть только один тип диаграммы, вы можете изменить поля и отступы, как сказал Арман. Но если это возможно, не меняйте их.
источник
Специально для этого есть тема
из документации Google диаграммы:
В настоящее время доступна только одна тема:
«развернутый» - максимизирует область диаграммы и рисует легенду и все метки внутри области диаграммы. Устанавливает следующие параметры:
источник