Настройка осей

Обзор

Размеры в данных часто отображаются по осям , горизонтальным и вертикальным. Так обстоит дело с: Диаграмма с областями , Гистограмма. , свечная диаграмма , столбчатая диаграмма , комбинированная диаграмма , линейная диаграмма , ступенчатая диаграмма с областями и точечная диаграмма .

Когда вы создаете диаграмму с осями, вы можете настроить некоторые их свойства:

• Дискретный и непрерывный
• Направление. Вы можете настроить направление, используя параметр 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>