Обзор
Измерения в данных часто отображаются на осях , горизонтальных и вертикальных. Это относится к: диаграмме с областями , гистограмме. , диаграмма свечей , столбчатая диаграмма , комбинированная диаграмма , линейная диаграмма , диаграмма с ступенчатой областью и точечная диаграмма .
Когда вы создаете диаграмму с осями, вы можете настроить некоторые их свойства:
- Дискретный и непрерывный
- Направление — вы можете настроить направление с помощью параметра 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>