#google-visualization
Вопрос:
Посмотрите на эту простую диаграмму Google. Я хотел бы избавиться от ненужного отступа между тегом hr и верхней частью графика. (Я предполагаю, что это для названия, но я не использую названия.)
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
titleTextStyle : {
fontSize:1
},
title: null,
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<hr/>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<hr/>
Редактировать
Я принял ответ вахаба мемо, потому что он непосредственно касается моего первоначального вопроса. Однако решение моей первоначальной проблемы вводит — или вместо этого раскрывает — другую проблему вертикального расстояния внизу. Посмотрите на этот очень высокий график (высокий график имеет смысл, например. для гистограмм со многими независимыми значениями). «Расстояние» вверх и вниз до заголовка горизонтальной оси излишне велико:
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
chartArea: {
width: '80%',
height: '80%',
top: 10
},
title: null,
hAxis: {
title: 'Year',
titleTextStyle: {
color: '#333'
}
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<hr/>
<div id="chart_div" style="width: 100%; height: 1200px;"></div>
<hr/>
Должен быть способ указать Диаграммам, как применять эти правила:
- не используйте заголовок вообще (также опустите пробел)
- используйте нормальную маркировку по горизонтальной оси внизу (с собственным размером этикетки).
- используйте все оставшееся пространство для самого графика.
Интересно, возможно ли это каким-либо образом.
Ответ №1:
Вы можете предоставить chartArea
конфигурацию, в options
которой учитывается высота и ширина диаграммы. Используя это, дополнительный интервал будет использоваться вашим представлением диаграммы. Обратитесь к приведенному ниже коду или к скрипке:
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
titleTextStyle: {
fontSize: 1
},
chartArea: {
width: '80%',
height: '80%',
top: 10
},
title: null,
hAxis: {
title: 'Year',
titleTextStyle: {
color: '#333'
}
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<hr/>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<hr/>