Обзор
Размеры в данных часто отображаются по осям , горизонтальным и вертикальным. Так обстоит дело с: Диаграмма с областями , Гистограмма. , свечная диаграмма , столбчатая диаграмма , комбинированная диаграмма , линейная диаграмма , ступенчатая диаграмма с областями и точечная диаграмма .
Когда вы создаете диаграмму с осями, вы можете настроить некоторые их свойства:
- Дискретный и непрерывный
- Направление. Вы можете настроить направление, используя параметр hAxis/vAxis.direction.
- Расположение и стиль метки. Вы можете настроить расположение и стиль метки, используя параметры hAxis/vAxis.textPosition и hAxis/vAxis.textStyle.
- Текст и стиль заголовка оси. Вы можете настроить текст и стиль заголовка оси, используя параметры hAxis/vAxis.title и hAxis/vAxis.titleTextStyle.
- Масштаб оси . Вы можете установить логарифмический (логарифмический) масштаб оси, используя параметры hAxis/vAxis.logScale или hAxis/vAxis.scaleType.
- Полный список параметров конфигурации оси см. в параметрах hAxis и vAxis в документации к вашей конкретной диаграмме.
Терминология
Большая/малая ось:
- Основная ось — это ось естественной ориентации диаграммы. Для линейных, площадных, столбчатых, комбинированных, ступенчатых диаграмм и диаграмм свечей это горизонтальная ось. Для гистограммы это вертикальная диаграмма. Точечная и круговая диаграммы не имеют главной оси.
- Малая ось — это другая ось.
Дискретная/непрерывная ось:
- Дискретная ось имеет конечное число равномерно расположенных значений, называемых категориями.
- Непрерывная ось имеет бесконечное количество возможных значений.
Дискретный или непрерывный
Основная ось диаграммы может быть дискретной или непрерывной. При использовании дискретной оси точки данных каждой серии равномерно распределяются по оси в соответствии с индексом их строки. При использовании непрерывной оси точки данных располагаются в соответствии со значением их домена.
Маркировка тоже другая. На дискретной оси имена категорий (указанные в столбце данных домена) используются в качестве меток. На непрерывной оси метки генерируются автоматически: на диаграмме показаны равномерно расположенные линии сетки, где каждая линия сетки помечена в соответствии со значением, которое она представляет.
Следующие оси всегда непрерывны:
- Обе оси пузырьковых диаграмм.
- Малая ось.
В линейных, областных, столбчатых, столбчатых и свечных диаграммах (а также комбинированных диаграммах, содержащих только такие серии) вы можете управлять типом главной оси:
- Для дискретной оси установите тип столбца данных
string. - Для непрерывной оси установите один из типов столбца данных:
number,date,datetimeилиtimeofday.
| Дискретный/непрерывный | Первый тип столбца | Пример |
|---|---|---|
| Дискретный | нить | |
| Непрерывный | число | |
| Непрерывный | дата |
Масштаб оси
Вы можете установить масштаб оси, используя опцию scaleType . Например, чтобы установить масштаб вертикальной оси в логарифмическом масштабе, используйте следующую опцию:
vAxis: {
scaleType: 'log'
}
На следующей диаграмме показан рост населения мира как в линейном (стандартном) масштабе, так и в логарифмическом масштабе.
Если ваши данные содержат нулевые или отрицательные значения, вы можете построить точки, используя опцию scaleType: 'mirrorLog' . В зеркально-логарифмическом масштабе нанесенное на график значение отрицательного числа минус журнал абсолютного значения числа. Значения, близкие к 0, отображаются в линейном масштабе.
В следующем примере показаны положительные и отрицательные числа Фибоначчи, нанесенные как в зеркально-логарифмическом, так и в линейном масштабе.
Числовые форматы
Вы можете управлять форматированием номеров меток с помощью hAxis.format и vAxis.format . Например, {hAxis: { format:'#,###%'} } отображает значения «1000%», «750%» и «50%» для значений 10, 7,5 и 0,5. Вы также можете указать любой из следующих пресетов:
-
{format: 'none'}: отображает числа без форматирования (например, 8000000). -
{format: 'decimal'}: отображает числа с разделителями тысяч (например, 8 000 000). -
{format: 'scientific'}: отображает числа в экспоненциальном формате (например, 8e6). -
{format: 'currency'}: отображает числа в местной валюте (например, 8 000 000,00 долларов США). -
{format: 'percent'}: отображает числа в процентах (например, 800 000 000%). -
{format: 'short'}: отображает сокращенные номера (например, 8M) -
{format: 'long'}: отображает числа как полные слова (например, 8 миллионов).
В таблице ниже вы можете выбрать один из пресетов:
Ниже приведена полная веб-страница приведенной выше диаграммы.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'GDP');
data.addRows([
['US', 16768100],
['China', 9181204],
['Japan', 4898532],
['Germany', 3730261],
['France', 2678455]
]);
var options = {
title: 'GDP of selected countries, in US $millions',
width: 500,
height: 300,
legend: 'none',
bar: {groupWidth: '95%'},
vAxis: { gridlines: { count: 4 } }
};
var chart = new google.visualization.ColumnChart(document.getElementById('number_format_chart'));
chart.draw(data, options);
document.getElementById('format-select').onchange = function() {
options['vAxis']['format'] = this.value;
chart.draw(data, options);
};
};
</script>
</head>
<body>
<select id="format-select">
<option value="">none</option>
<option value="decimal" selected>decimal</option>
<option value="scientific">scientific</option>
<option value="percent">percent</option>
<option value="currency">currency</option>
<option value="short">short</option>
<option value="long">long</option>
</select>
<div id="number_format_chart">
</body>
</html>
При использовании формата, в котором используется текст (например, long формат, который отображает 8 000 000 как «8 миллионов»), вы можете локализовать строки на другие языки, указав код языка при загрузке библиотеки Google Charts. Например, чтобы изменить «8 миллионов» в русское «8 миллионов», назовем библиотеку так:
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {'packages': ['corechart'], 'language': 'ru'});
google.charts.setOnLoadCallback(drawMarkersMap);
</script>