Гистограммы

Обзор

Гистограммы Google отображаются в браузере с использованием SVG или VML , в зависимости от того, что подходит для браузера пользователя. Как и все диаграммы Google, гистограммы отображают всплывающие подсказки, когда пользователь наводит курсор на данные. Вертикальную версию этой диаграммы см. в столбчатой ​​диаграмме .

Примеры

Раскраски

Построим график плотности четырех драгоценных металлов:

Выше все цвета — синий по умолчанию. Это потому, что все они являются частью одной серии; если бы была вторая серия, она была бы окрашена в красный цвет. Мы можем настроить эти цвета с помощью роли стиля :

Существует три различных способа выбора цветов, и наша таблица данных демонстрирует их все: значения RGB, английские названия цветов и объявление в стиле CSS:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],
         ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

Стили бара

Роль стиля позволяет вам управлять несколькими аспектами внешнего вида панели с помощью объявлений в стиле CSS:

  • color
  • opacity
  • fill-color
  • fill-opacity
  • stroke-color
  • stroke-opacity
  • stroke-width

Мы не рекомендуем слишком свободно смешивать стили внутри диаграммы — выберите стиль и придерживайтесь его, — но чтобы продемонстрировать все атрибуты стиля, вот образец:

В первых двух полосах используется определенный color (первая — с английским названием, вторая — со значением RGB). opacity не выбрана, поэтому используется значение по умолчанию 1,0 (полностью непрозрачный); вот почему вторая полоса закрывает линию сетки позади нее. В третьем столбце используется opacity 0,2, обнажающая линию сетки. В четвертом баре используются три атрибута стиля: stroke-color и stroke-width для рисования границы и fill-color для указания цвета прямоугольника внутри. Крайняя правая панель дополнительно использует stroke-opacity и fill-opacity чтобы выбрать непрозрачность границы и заливки:

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Маркировка баров

Диаграммы имеют несколько типов меток, например метки делений, метки легенд и метки во всплывающих подсказках. В этом разделе мы увидим, как размещать метки внутри (или рядом) столбцов гистограммы.

Допустим, мы хотели пометить каждый столбец соответствующим химическим символом. Мы можем сделать это с помощью роли аннотации :

В нашей таблице данных мы определяем новый столбец с { role: 'annotation' } для хранения меток наших столбцов:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Хотя пользователи могут наводить курсор на столбцы, чтобы увидеть значения данных, вы можете включить их в сами столбцы:

Это немного сложнее, чем должно быть, поскольку мы создаем DataView для указания аннотации для каждого столбца.

  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>

Если бы мы хотели отформатировать значение по-другому, мы могли бы определить форматировщик и обернуть его в такую ​​функцию:

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

Тогда мы могли бы вызвать его с помощью calc: getValueAt.bind(undefined, 1) .

Если метка слишком велика и не помещается целиком внутри панели, она отображается снаружи:

Гистограммы с накоплением

Столбчатая диаграмма с накоплением — это гистограмма, в которой связанные значения размещаются друг над другом. Если есть отрицательные значения, они располагаются в обратном порядке ниже базовой линии оси диаграммы. Гистограммы с накоплением обычно используются, когда категория естественным образом делится на компоненты. Например, рассмотрим некоторые гипотетические продажи книг, разделенные по жанрам и сравненные во времени:

Вы создаете гистограмму с накоплением, устанавливая для параметра isStacked значение true :

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

Гистограммы с накоплением также поддерживают 100%-ное наложение, при котором стеки элементов в каждом значении домена масштабируются так, что их сумма составляет 100%. Для этого доступны следующие параметры isStacked: 'percent' , который форматирует каждое значение как процент от 100 %, и isStacked: 'relative' , который форматирует каждое значение как дробь от 1. Существует также опция isStacked: 'absolute' , что функционально эквивалентно isStacked: true .

Обратите внимание, что на диаграмме с накоплением 100 % справа значения делений основаны на относительной шкале от 0 до 1 как доли от 1, но значения оси отображаются в процентах. Это связано с тем, что деления процентной оси являются результатом применения формата «#.##%» к относительным значениям шкалы 0–1. При использовании isStacked: 'percent' обязательно указывайте все тики, используя относительную шкалу 0–1.

Сложенный
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
100 % сложено
        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };

Создание гистограмм материалов

В 2014 году Google объявила о правилах, направленных на поддержку единого внешнего вида своих свойств и приложений (например, приложений Android), работающих на платформах Google. Мы называем это проектом Material Design . Мы будем предоставлять «материальные» версии всех наших основных диаграмм; вы можете использовать их, если вам нравится, как они выглядят.

Создание гистограммы материала аналогично созданию того, что мы теперь будем называть «классической» гистограммой. Вы загружаете API визуализации Google (хотя и с пакетом 'bar' вместо пакета 'corechart' ), определяете свою таблицу данных, а затем создаете объект (но класса google.charts.Bar вместо google.visualization.BarChart ).

Примечание. Диаграммы материалов не будут работать в старых версиях Internet Explorer. (IE8 и более ранние версии не поддерживают SVG, который требуется для диаграмм материалов.)

Столбчатые диаграммы материалов имеют множество небольших улучшений по сравнению с классическими гистограммами, включая улучшенную цветовую палитру, закругленные углы, более четкое форматирование меток, более узкие интервалы по умолчанию между сериями, более мягкие линии сетки и заголовки (а также добавление субтитров).

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          bars: 'horizontal' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Таблицы материалов находятся в стадии бета-тестирования . Внешний вид и интерактивность в значительной степени являются окончательными, но многие опции, доступные в классических диаграммах, еще в них недоступны. В этом выпуске вы можете найти список опций, которые еще не поддерживаются.

Кроме того, способ объявления параметров не доработан, поэтому, если вы используете какой-либо из классических параметров, вам необходимо преобразовать их в параметры материала, заменив эту строку:

chart.draw(data, options);

...с этим:

chart.draw(data, google.charts.Bar.convertOptions(options));

Использование google.charts.Bar.convertOptions() позволяет вам воспользоваться определенными функциями, такими как предустановленные параметры hAxis/vAxis.format .

Диаграммы Dual-X

Примечание. Оси Dual-X доступны только для диаграмм материалов (т. е. для диаграмм с пакетной bar ).

Иногда вам может потребоваться отобразить две серии на гистограмме с двумя независимыми осями X: верхнюю ось для одной серии и нижнюю ось для другой:

Обратите внимание, что наши две оси X не только помечены по-разному («парсеки» и «кажущаяся величина»), но и каждая из них имеет свои собственные независимые масштабы и линии сетки. Если вы хотите настроить это поведение, используйте параметры hAxis.gridlines .

В приведенном ниже коде параметры axes и series вместе определяют внешний вид диаграммы с двойным X. Параметр series указывает, какую ось использовать для каждой из них ( 'distance' и 'brightness' ; они не обязательно должны иметь какое-либо отношение к именам столбцов в таблице данных). Опция axes затем делает эту диаграмму диаграммой с двойным X, помещая ось 'apparent magnitude' вверху, а ось 'parsecs' внизу.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Galaxy', 'Distance', 'Brightness'],
          ['Canis Major Dwarf', 8000, 23.3],
          ['Sagittarius Dwarf', 24000, 4.5],
          ['Ursa Major II Dwarf', 30000, 14.3],
          ['Lg. Magellanic Cloud', 50000, 0.9],
          ['Bootes I', 60000, 13.1]
        ]);

        var options = {
          width: 800,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          bars: 'horizontal', // Required for Material Bar Charts.
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            x: {
              distance: {label: 'parsecs'}, // Bottom x-axis.
              brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
            }
          }
        };

      var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="dual_x_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Чарты Top-X

Примечание. Оси Top-X доступны только для диаграмм материалов (т. е. для диаграмм с пакетной bar ).

Если вы хотите разместить метки и заголовок оси X вверху диаграммы, а не внизу, вы можете сделать это в диаграммах материалов с помощью опции axes.x : 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Opening Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          ["Queen's pawn (d4)", 31],
          ["Knight to King 3 (Nf3)", 12],
          ["Queen's bishop pawn (c4)", 10],
          ['Other', 3]
        ]);

        var options = {
          title: 'Chess opening moves',
          width: 900,
          legend: { position: 'none' },
          chart: { title: 'Chess opening moves',
                   subtitle: 'popularity by percentage' },
          bars: 'horizontal', // Required for Material Bar Charts.
          axes: {
            x: {
              0: { side: 'top', label: 'Percentage'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        chart.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="top_x_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Загрузка

Имя пакета google.charts.load — "corechart" . Имя класса визуализации — google.visualization.BarChart .

  google.charts.load("current", {packages: ["corechart"]});

  var visualization = new google.visualization.BarChart(container);

Для гистограмм материалов имя пакета google.charts.load — "bar" . Имя класса визуализации — google.charts.Bar .

  google.charts.load("current", {packages: ["bar"]});

  var chart = new google.charts.Bar(container);

Формат данных

Строки: каждая строка в таблице представляет группу столбцов.

Столбцы:

Столбец 0 Столбец 1 ... Столбец N
Цель: Значения бара 1 в этой группе ... Значения Bar N в этой группе
Тип данных: число ... число
Роль: домен данные ... данные
Дополнительные роли столбцов : ...

Варианты конфигурации

Имя
анимация.длительность

Продолжительность анимации в миллисекундах. Подробности смотрите в документации по анимации .

Тип: номер
По умолчанию: 0
анимация.easing

Функция замедления, примененная к анимации. Доступны следующие варианты:

  • «линейный» — постоянная скорость.
  • 'in' - Легкость - Начинайте медленно и ускоряйтесь.
  • 'out' - Успокойтесь - Начинайте быстро и замедляйтесь.
  • «inAndOut» — легкость входа и выхода — начинайте медленно, ускоряйтесь, затем замедляйтесь.
Тип: строка
По умолчанию: «линейный»
анимация.стартап

Определяет, будет ли диаграмма анимироваться при первоначальном рисовании. Если true , диаграмма начнется с базовой линии и анимируется до конечного состояния.

Тип: логический
По умолчанию ложь
аннотации.всегдавне

В гистограммах и столбчатых диаграммах, если установлено значение true , все аннотации отображаются за пределами гистограммы/столбца.

Тип: логический
По умолчанию: ложь
аннотации.данные
Для диаграмм, поддерживающих аннотации , объект annotations.datum позволяет переопределить выбор Google Charts для аннотаций, предоставляемых для отдельных элементов данных (например, значений, отображаемых на каждой полосе гистограммы). Вы можете управлять цветом с помощью annotations.datum.stem.color , длиной стебля с помощью annotations.datum.stem.length и стилем с помощью annotations.datum.style .
Тип: объект
По умолчанию: цвет «черный»; длина 12; стиль — «точка».
аннотации.домен
Для диаграмм, поддерживающих аннотации , объект annotations.domain позволяет переопределить выбор Google Charts для аннотаций, предоставленных для домена (основная ось диаграммы, например ось X на типичной линейной диаграмме). Вы можете управлять цветом с помощью annotations.domain.stem.color , длиной основы с помощью annotations.domain.stem.length и стилем с помощью annotations.domain.style .
Тип: объект
По умолчанию: цвет «черный»; длина 5; стиль — «точка».
annotations.boxStyle

Для диаграмм, поддерживающих аннотации , объект annotations.boxStyle управляет внешним видом полей, окружающих аннотации:

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};

В настоящее время этот параметр поддерживается для диаграмм с областями, гистограммами, столбцами, комбинированными, линейными и точечными диаграммами. Это не поддерживается аннотационной диаграммой .

Тип: объект
По умолчанию: ноль
аннотации.highContrast
Для диаграмм, поддерживающих аннотации , логическое значение annotations.highContrast позволяет переопределить выбор цвета аннотации в Google Charts. По умолчанию annotations.highContrast имеет значение true, что заставляет диаграммы выбирать цвет аннотации с хорошей контрастностью: светлые цвета на темном фоне и темные на светлом. Если вы установите для annotations.highContrast значение false и не укажете собственный цвет аннотации, Google Charts будет использовать для аннотации цвет серии по умолчанию:
Тип: логический
По умолчанию: правда
аннотации.стержень
Для диаграмм, поддерживающих аннотации , объект annotations.stem позволяет переопределить выбор Google Charts для стиля основы. Вы можете управлять цветом с помощью annotations.stem.color и длиной стебля с помощью annotations.stem.length . Обратите внимание, что параметр длины основы не влияет на аннотации со стилем 'line' : для аннотаций к базе 'line' длина основы всегда такая же, как и текст, а для аннотаций домена 'line' основа распространяется на всю диаграмму. .
Тип: объект
По умолчанию: цвет «черный»; длина равна 5 для аннотаций домена и 12 для аннотаций данных.
аннотации.стиль
Для диаграмм, поддерживающих аннотации , параметр annotations.style позволяет переопределить выбор типа аннотации в Google Charts. Это может быть либо 'line' , либо 'point' .
Тип: строка
По умолчанию: «точка»
аннотации.textStyle
Для диаграмм, поддерживающих аннотации , объект annotations.textStyle управляет внешним видом текста аннотации:
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};

В настоящее время этот параметр поддерживается для диаграмм с областями, гистограммами, столбцами, комбинированными, линейными и точечными диаграммами. Это не поддерживается аннотационной диаграммой .

Тип: объект
По умолчанию: ноль
осьНазванияПозиция

Где разместить заголовки осей по сравнению с областью диаграммы. Поддерживаемые значения:

  • in — Нарисуйте заголовки осей внутри области диаграммы.
  • out — вывести заголовки осей за пределы области диаграммы.
  • нет — пропустить названия осей.
Тип: строка
По умолчанию: «выход»
фоновый цвет

Цвет фона основной области диаграммы. Это может быть либо простая цветовая строка HTML, например: 'red' или '#00cc00' , либо объект со следующими свойствами.

Тип: строка или объект
По умолчанию: «белый»
фонЦвет.обводка

Цвет границы диаграммы в виде цветовой строки HTML.

Тип: строка
По умолчанию: '#666'
backgroundColor.strokeWidth

Ширина границы в пикселях.

Тип: номер
По умолчанию: 0
фонЦвет.заливка

Цвет заливки диаграммы в виде цветовой строки HTML.

Тип: строка
По умолчанию: «белый»
bar.groupWidth
Ширина группы столбцов, указанная в любом из этих форматов:
  • Пикселей (например, 50).
  • Процент доступной ширины для каждой группы (например, «20%»), где «100%» означает, что между группами нет пространства.
Тип: число или строка.
По умолчанию: Золотое сечение , примерно «61,8%».
бары

Являются ли столбцы на гистограмме материала вертикальными или горизонтальными. Этот параметр не влияет на классические гистограммы и классические столбчатые диаграммы.

Тип: «горизонтальный» или «вертикальный».
По умолчанию: «вертикальный»
область диаграммы

Объект с элементами для настройки размещения и размера области диаграммы (где рисуется сама диаграмма, исключая оси и легенды). Поддерживаются два формата: число или число, за которым следует %. Простое число — это значение в пикселях; число, за которым следует %, представляет собой процент. Пример: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Тип: объект
По умолчанию: ноль
chartArea.backgroundColor
Цвет фона области диаграммы. Когда используется строка, это может быть либо шестнадцатеричная строка (например, «#fdc»), либо название цвета на английском языке. При использовании объекта могут быть предоставлены следующие свойства:
  • stroke : цвет, представленный в виде шестнадцатеричной строки или английского названия цвета.
  • strokeWidth : если предусмотрено, рисует границу вокруг области диаграммы заданной ширины (и с цветом stroke ).
Тип: строка или объект
По умолчанию: «белый»
диаграммаArea.left

Насколько далеко рисовать диаграмму от левой границы.

Тип: число или строка.
По умолчанию: авто
диаграммаArea.top

На каком расстоянии рисовать диаграмму от верхней границы.

Тип: число или строка.
По умолчанию: авто
ChartArea.width

Ширина области диаграммы.

Тип: число или строка.
По умолчанию: авто
диаграммаArea.height

Высота области диаграммы.

Тип: число или строка.
По умолчанию: авто
диаграмма.подзаголовок

Для диаграмм материалов этот параметр определяет подзаголовок. Только диаграммы материалов поддерживают субтитры.

Тип: строка
По умолчанию: ноль
диаграмма.название

Для диаграмм материалов этот параметр определяет заголовок.

Тип: строка
По умолчанию: ноль
цвета

Цвета, используемые для элементов диаграммы. Массив строк, где каждый элемент представляет собой строку цвета HTML, например: colors:['red','#004411'] .

Тип: Массив строк.
По умолчанию: цвета по умолчанию
непрозрачность данных

Прозрачность точек данных: 1,0 означает полную непрозрачность, а 0,0 — полную прозрачность. В точечных, гистограммах, гистограммах и столбчатых диаграммах это относится к видимым данным: точкам на точечной диаграмме и прямоугольникам на остальных. В диаграммах, где выбор данных создает точку, например в линейных диаграммах и диаграммах с областями, это относится к кругам, которые появляются при наведении курсора или выборе. Комбинированная диаграмма демонстрирует оба поведения, и этот параметр не влияет на другие диаграммы. (Чтобы изменить непрозрачность линии тренда, см. раздел Непрозрачность линии тренда .)

Тип: номер
По умолчанию: 1,0
включитьИнтерактивность

Определяет ли диаграмма события, связанные с пользователем, или реагирует на взаимодействие с пользователем. Если значение равно false, диаграмма не будет генерировать события «выбор» или другие события, основанные на взаимодействии (но будет генерировать события готовности или ошибки), а также не будет отображать наводящий текст или иным образом изменяться в зависимости от ввода пользователя.

Тип: логический
По умолчанию: правда
исследователь

Опция explorer позволяет пользователям панорамировать и масштабировать диаграммы Google. explorer: {} обеспечивает поведение проводника по умолчанию, позволяя пользователям перемещаться по горизонтали и вертикали путем перетаскивания, а также увеличивать и уменьшать масштаб путем прокрутки.

Эта функция является экспериментальной и может измениться в будущих выпусках.

Примечание. Проводник работает только с непрерывными осями (например, числами или датами).

Тип: объект
По умолчанию: ноль
explorer.actions

Обозреватель Google Charts поддерживает три действия:

  • dragToPan : перетащите для перемещения по диаграмме по горизонтали и вертикали. Для панорамирования только по горизонтальной оси используйте explorer: { axis: 'horizontal' } . Аналогично для вертикальной оси.
  • dragToZoom : поведение проводника по умолчанию — увеличение и уменьшение масштаба при прокрутке пользователем. Если используется explorer: { actions: ['dragToZoom', 'rightClickToReset'] } , перетаскивание по прямоугольной области увеличивает масштаб этой области. Мы рекомендуем использовать rightClickToReset всякий раз, когда используется dragToZoom . См. explorer.maxZoomIn , explorer.maxZoomOut и explorer.zoomDelta для настройки масштабирования.
  • rightClickToReset : щелчок правой кнопкой мыши по диаграмме возвращает ее к исходному уровню панорамирования и масштабирования.
Тип: Массив строк.
По умолчанию: ['dragToPan', 'rightClickToReset']
explorer.axis

По умолчанию пользователи могут панорамировать как по горизонтали, так и по вертикали, когда используется опция explorer . Если вы хотите, чтобы пользователи могли панорамировать только по горизонтали, используйте explorer: { axis: 'horizontal' } . Аналогично, explorer: { axis: 'vertical' } включает только вертикальное панорамирование.

Тип: строка
По умолчанию: горизонтальное и вертикальное панорамирование.
explorer.keepInBounds

По умолчанию пользователи могут панорамировать все вокруг, независимо от того, где находятся данные. Чтобы гарантировать, что пользователи не выходят за пределы исходной диаграммы, используйте explorer: { keepInBounds: true } .

Тип: логический
По умолчанию: ложь
explorer.maxZoomIn

Максимальное увеличение, которое может увеличить проводник. По умолчанию пользователи смогут увеличить масштаб настолько, что смогут видеть только 25 % исходного изображения. Настройка explorer: { maxZoomIn: .5 } позволит пользователям увеличивать масштаб только настолько, чтобы увидеть половину исходного изображения.

Тип: номер
По умолчанию: 0,25
explorer.maxZoomOut

Максимум, на который может уменьшить масштаб проводник. По умолчанию пользователи смогут уменьшить масштаб настолько, что диаграмма будет занимать только 1/4 доступного пространства. Настройка explorer: { maxZoomOut: 8 } позволит пользователям уменьшать масштаб настолько, что диаграмма будет занимать только 1/8 доступного пространства.

Тип: номер
По умолчанию: 4
explorer.zoomDelta

Когда пользователи увеличивают или уменьшают масштаб, explorer.zoomDelta определяет, насколько они увеличивают масштаб. Чем меньше число, тем плавнее и медленнее масштабирование.

Тип: номер
По умолчанию: 1,5
фокусЦель

Тип объекта, который получает фокус при наведении курсора мыши. Также влияет на то, какой объект выбирается щелчком мыши и какой элемент таблицы данных связан с событиями. Может быть одним из следующих:

  • 'datum' — сосредоточьтесь на одной точке данных. Соответствует ячейке в таблице данных.
  • «категория» — сосредоточьтесь на группировке всех точек данных вдоль главной оси. Соответствует строке в таблице данных.

В focusTarget «категория» всплывающая подсказка отображает все значения категории. Это может быть полезно для сравнения значений разных рядов.

Тип: строка
По умолчанию: «база данных»
размер шрифта

Размер шрифта по умолчанию (в пикселях) для всего текста на диаграмме. Вы можете переопределить это, используя свойства для определенных элементов диаграммы.

Тип: номер
По умолчанию: автоматический
имя шрифта

Шрифт по умолчанию для всего текста на диаграмме. Вы можете переопределить это, используя свойства для определенных элементов диаграммы.

Тип: строка
По умолчанию: «Ариал»
сила IFrame

Рисует диаграмму внутри встроенного фрейма. (Обратите внимание, что в IE8 этот параметр игнорируется; все диаграммы IE8 рисуются в i-кадрах.)

Тип: логический
По умолчанию: ложь
hAxes

Указывает свойства для отдельных горизонтальных осей, если диаграмма имеет несколько горизонтальных осей. Каждый дочерний объект является объектом hAxis и может содержать все свойства, поддерживаемые hAxis . Значения этих свойств переопределяют любые глобальные настройки для того же свойства.

Чтобы указать диаграмму с несколькими горизонтальными осями, сначала определите новую ось с помощью series.targetAxisIndex , а затем настройте ось с помощью hAxes . В следующем примере серия 1 назначается нижней оси и задает для нее собственный заголовок и стиль текста:

series:{1:{targetAxisIndex:1{% raw %}}}{% endraw %}, hAxes:{1:{title:'Losses', textStyle:{color: 'red'{% raw %}}}{% endraw %}}

Это свойство может быть либо объектом, либо массивом: объект представляет собой набор объектов, каждый из которых имеет числовую метку, указывающую определяемую им ось — это формат, показанный выше; массив представляет собой массив объектов, по одному на ось. Например, следующая запись в стиле массива идентична объекту hAxis , показанному выше:

hAxes: {
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {
      color: 'red'
    }
  } // Axis 1
Тип: Массив объектов или объект с дочерними объектами.
По умолчанию: ноль
ось

Объект с элементами для настройки различных элементов горизонтальной оси. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
Тип: объект
По умолчанию: ноль
hAxis.baseline

Базовая линия для горизонтальной оси.

Тип: номер
По умолчанию: автоматический
hAxis.baselineColor

Цвет базовой линии горизонтальной оси. Может быть любой цветовой строкой HTML, например: 'red' или '#00cc00' .

Тип: номер
По умолчанию: «черный»
hAxis.direction

Направление роста значений по горизонтальной оси. Укажите -1 , чтобы изменить порядок значений.

Тип: 1 или -1
По умолчанию: 1
hAxis.format

Строка формата для меток числовых осей. Это подмножество набора шаблонов ICU . Например, {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 миллионов).

Фактическое форматирование, примененное к метке, определяется языковым стандартом, с которым был загружен API. Дополнительные сведения см. в разделе Загрузка диаграмм с определенной локалью .

При вычислении значений делений и линий сетки будут рассматриваться несколько альтернативных комбинаций всех соответствующих вариантов линий сетки, и альтернативы будут отклонены, если отформатированные метки делений будут дублироваться или перекрываться. Таким образом, вы можете указать format:"#" если хотите отображать только целочисленные значения делений, но имейте в виду, что если ни одна альтернатива не удовлетворяет этому условию, линии сетки или деления отображаться не будут.

Тип: строка
По умолчанию: авто
hAxis.gridlines

Объект со свойствами для настройки линий сетки на горизонтальной оси. Обратите внимание, что линии сетки по горизонтальной оси рисуются вертикально. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь:

{color: '#333', minSpacing: 20}
Тип: объект
По умолчанию: ноль
hAxis.gridlines.color

Цвет горизонтальных линий сетки внутри области диаграммы. Укажите допустимую цветовую строку HTML.

Тип: строка
По умолчанию: '#CCC'
hAxis.gridlines.count

Примерное количество горизонтальных линий сетки внутри области диаграммы. Если вы укажете положительное число для gridlines.count , оно будет использоваться для вычисления minSpacing между линиями сетки. Вы можете указать значение 1 , чтобы рисовать только одну линию сетки, или 0 , чтобы линии сетки не отображались. Укажите -1 (значение по умолчанию), чтобы автоматически вычислить количество линий сетки на основе других параметров.

Тип: номер
По умолчанию: -1
hAxis.gridlines.units

Переопределяет формат по умолчанию для различных аспектов типов данных даты/даты/времени дня при использовании с вычисляемыми линиями сетки диаграммы. Позволяет форматировать годы, месяцы, дни, часы, минуты, секунды и миллисекунды.

Общий формат:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

Дополнительную информацию можно найти в разделе Даты и время .

Тип: объект
По умолчанию: ноль
hAxis.minorGridlines

Объект с элементами для настройки второстепенных линий сетки на горизонтальной оси, аналогично параметру hAxis.gridlines.

Тип: объект
По умолчанию: ноль
hAxis.minorGridlines.color

Цвет второстепенных горизонтальных линий сетки внутри области диаграммы. Укажите допустимую цветовую строку HTML.

Тип: строка
По умолчанию: сочетание цветов линии сетки и фона.
hAxis.minorGridlines.count

Опция minorGridlines.count по большей части устарела, за исключением отключения второстепенных линий сетки путем установки счетчика равным 0. Количество второстепенных линий сетки теперь полностью зависит от интервала между основными линиями сетки (см. hAxis.gridlines.interval ) и минимально необходимого пространства (см. hAxis.minorGridlines.minSpacing ).

Тип: номер
По умолчанию: 1
hAxis.minorGridlines.units

Переопределяет формат по умолчанию для различных аспектов типов данных date/datetime/timeofday при использовании с вычисляемыми диаграммами majorGridlines. Позволяет форматировать годы, месяцы, дни, часы, минуты, секунды и миллисекунды.

Общий формат:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

Дополнительную информацию можно найти в разделе Даты и время .

Тип: объект
По умолчанию: ноль
hAxis.logScale

Свойство hAxis , которое преобразует горизонтальную ось в логарифмический масштаб (требуется, чтобы все значения были положительными). Установите значение true для «да».

Тип: логический
По умолчанию: ложь
hAxis.scaleType

Свойство hAxis , которое преобразует горизонтальную ось в логарифмический масштаб. Может быть одним из следующих:

  • null — логарифмическое масштабирование не выполняется.
  • 'log' - логарифмическое масштабирование. Отрицательные и нулевые значения не отображаются. Этот параметр аналогичен настройке hAxis: { logscale: true } .
  • 'mirrorLog' — логарифмическое масштабирование, при котором отображаются отрицательные и нулевые значения. Нанесенное на график значение отрицательного числа является отрицательным логарифмом абсолютного значения. Значения, близкие к 0, отображаются в линейном масштабе.
Тип: строка
По умолчанию: ноль
hAxis.textStyle

Объект, определяющий стиль текста по горизонтальной оси. Объект имеет такой формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color может быть любой цветовой строкой HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: объект
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.textPosition

Положение текста по горизонтальной оси относительно области диаграммы. Поддерживаемые значения: «вне», «вход», «нет».

Тип: строка
По умолчанию: «выход»
hAxis.ticks

Заменяет автоматически сгенерированные отметки оси X указанным массивом. Каждый элемент массива должен быть либо допустимым значением тика (например, числом, датой, датой и временем или днем), либо объектом. Если это объект, он должен иметь свойство v для значения отметки и необязательное свойство f , содержащее литеральную строку, которая будет отображаться в качестве метки.

ViewWindow будет автоматически расширен, чтобы включить минимальные и максимальные отметки, если вы не укажете viewWindow.min или viewWindow.max для переопределения.

Примеры:

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
Тип: Массив элементов
По умолчанию: авто
hAxis.title

Свойство hAxis , определяющее заголовок горизонтальной оси.

Тип: строка
По умолчанию: ноль
hAxis.titleTextStyle

Объект, определяющий стиль текста заголовка по горизонтальной оси. Объект имеет такой формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color может быть любой цветовой строкой HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: объект
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.maxValue

Перемещает максимальное значение горизонтальной оси на указанное значение; на большинстве графиков это будет вправо. Игнорируется, если для этого параметра установлено значение меньше максимального значения x данных. hAxis.viewWindow.max переопределяет это свойство.

Тип: номер
По умолчанию: автоматический
hAxis.minValue

Перемещает минимальное значение горизонтальной оси на указанное значение; на большинстве графиков это будет левое положение. Игнорируется, если для этого параметра установлено значение, превышающее минимальное значение x данных. hAxis.viewWindow.min переопределяет это свойство.

Тип: номер
По умолчанию: автоматический
hAxis.viewWindowMode

Указывает, как масштабировать горизонтальную ось для отображения значений в области диаграммы. Поддерживаются следующие строковые значения:

  • «красиво» — масштабируйте горизонтальные значения так, чтобы максимальные и минимальные значения данных отображались немного внутри левой и правой части области диаграммы. Окно представления расширяется до ближайшей основной линии сетки для чисел или ближайшей второстепенной линии сетки для дат и времени.
  • «максимизировано» — масштабируйте горизонтальные значения так, чтобы максимальные и минимальные значения данных касались левой и правой части области диаграммы. Это приведет к игнорированию haxis.viewWindow.min и haxis.viewWindow.max .
  • «явный» — устаревший параметр для указания значений левого и правого масштаба области диаграммы. (Устарело, поскольку оно избыточно для haxis.viewWindow.min и haxis.viewWindow.max .) Значения данных за пределами этих значений будут обрезаны. Вы должны указать объект hAxis.viewWindow описывающий максимальное и минимальное отображаемые значения.
Тип: строка
По умолчанию: эквивалент «pretty», но haxis.viewWindow.min и haxis.viewWindow.max имеют приоритет, если они используются.
hAxis.viewWindow

Указывает диапазон обрезки горизонтальной оси.

Тип: объект
По умолчанию: ноль
hAxis.viewWindow.max

Максимальное значение горизонтальных данных для визуализации.

Игнорируется, когда hAxis.viewWindowMode имеет значение «красивый» или «максимальный».

Тип: номер
По умолчанию: авто
hAxis.viewWindow.min

Минимальное значение горизонтальных данных для визуализации.

Игнорируется, когда hAxis.viewWindowMode имеет значение «красивый» или «максимальный».

Тип: номер
По умолчанию: авто
высота

Высота диаграммы в пикселях.

Тип: номер
По умолчанию: высота содержащего элемента.
isStacked

Если установлено значение true, элементы для всех серий складываются в каждое значение домена. Примечание. В диаграммах «Столбец» , «Область» и «Ступенчатая область» Google Charts меняет порядок элементов легенды на обратный, чтобы лучше соответствовать расположению элементов серии (например, серия 0 будет самым нижним элементом легенды). Это не относится к гистограммам .

Параметр isStacked также поддерживает 100%-ное стекирование, при котором стеки элементов в каждом значении домена масштабируются до 100%.

Параметры isStacked :

  • false — элементы не будут складываться. Это опция по умолчанию.
  • true — объединяет элементы для всех серий в каждом значении домена.
  • 'percent' — суммирует элементы для всех серий по каждому значению домена и масштабирует их так, чтобы их сумма составляла 100 %, при этом значение каждого элемента рассчитывается как процент, равный 100 %.
  • 'relative' — суммирует элементы для всех серий по каждому значению домена и масштабирует их так, чтобы их сумма составляла 1, при этом значение каждого элемента рассчитывается как дробь от 1.
  • 'absolute' — работает так же, как isStacked: true .

При 100% суммировании расчетное значение для каждого элемента появится во всплывающей подсказке после его фактического значения.

Целевая ось по умолчанию будет отображать значения деления на основе относительной шкалы 0–1 в виде долей от 1 для 'relative' и 0–100 % для 'percent' ( Примечание: при использовании параметра 'percent' значения оси/тикинга отображаются в процентах, однако фактические значения представляют собой относительные значения шкалы 0–1. Это связано с тем, что деления процентной оси являются результатом применения формата «#.##%» к относительным значениям шкалы 0–1. используя isStacked: 'percent' , обязательно укажите все отметки/линии сетки, используя относительные значения шкалы 0–1). Вы можете настроить значения линий сетки/отметок и форматирование, используя соответствующие параметры hAxis/vAxis .

100-процентное стекирование поддерживает только значения данных типа number и должно иметь нулевую базовую линию.

Тип: логическое значение/строка
По умолчанию: ложь
легенда

Объект с членами для настройки различных аспектов легенды. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Тип: объект
По умолчанию: ноль
легенда.pageIndex

Начальный выбранный индекс страницы легенды, отсчитываемый от нуля.

Тип: номер
По умолчанию: 0
легенда.позиция

Позиция легенды. Может быть одним из следующих:

  • «дно» — под графиком.
  • «left» — слева от диаграммы, при условии, что с левой осью не связана никакая серия. Поэтому, если вам нужна легенда слева, используйте опцию targetAxisIndex: 1 .
  • 'in' — внутри диаграммы, в верхнем левом углу.
  • 'none' — легенда не отображается.
  • 'right' - Справа от диаграммы. Несовместимо с опцией vAxes .
  • 'top' - Над графиком.
Тип: строка
По умолчанию: «право»
легенда.выравнивание

Согласование легенды. Может быть одним из следующих:

  • «start» — выравнивается по началу области, выделенной для легенды.
  • 'center' — центрируется в области, отведенной для легенды.
  • «конец» — выравнивается по концу области, выделенной для легенды.

Начало, центр и конец зависят от стиля легенды (вертикального или горизонтального). Например, в «правой» легенде «начало» и «конец» находятся вверху и внизу соответственно; для «верхней» легенды «начало» и «конец» будут находиться слева и справа от области соответственно.

Значение по умолчанию зависит от положения легенды. Для «нижних» легенд по умолчанию используется «центр»; другие легенды по умолчанию имеют значение «старт».

Тип: строка
По умолчанию: автоматический
Legend.textStyle

Объект, определяющий стиль текста легенды. Объект имеет следующий формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color может быть любой цветовой строкой HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: объект
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
обратныеКатегории

Если установлено значение true, серия будет рисоваться снизу вверх. По умолчанию рисуется сверху вниз.

Тип: логический
По умолчанию: ложь
ориентация

Ориентация диаграммы. При установке на 'vertical' вращается оси диаграммы так, чтобы (например) диаграмма столбца становится диаграммой, а диаграмма площади растет вправо, а не вверх:

Тип: строка
По умолчанию: «горизонтальный»
ряд

Массив объектов, каждый из которых описывает формат соответствующей серии в диаграмме. Чтобы использовать значения по умолчанию для серии, укажите пустой объект {}. Если серия или значение не указано, глобальное значение будет использоваться. Каждый объект поддерживает следующие свойства:

  • annotations - объект, который будет применен к аннотациям для этой серии. Это может быть использовано для управления, например, в textStyle для серии:

    series: {
  0: {
    annotations: {
      textStyle: {fontSize: 12, color: 'red' }
    }
  }
}

    Смотрите различные варианты annotations для более полного списка того, что можно настроить.

  • color - цвет для использования для этой серии. Укажите действительную цветную строку HTML.
  • labelInLegend - описание серии, чтобы появиться в легенде графика.
  • targetAxisIndex - какая ось назначать эту серию, где 0 - ось по умолчанию, а 1 - противоположная ось. Значение по умолчанию составляет 0; Установите 1, чтобы определить диаграмму, где различные серии отображаются против разных оси. По крайней мере, одна серия была выделена по оси по умолчанию. Вы можете определить другую шкалу для разных осей.
  • visibleInLegend - логическое значение, где истина означает, что серия должна иметь легендарную запись, а ложь означает, что это не должно. По умолчанию верно.

Вы можете указать либо массив объектов, каждый из которых относится к серии в данном порядке, либо вы можете указать объект, в котором у каждого ребенка есть числовое ключ, указывающий, к какой серии он применим. Например, следующие два заявления идентичны и объявляют первую серию черной и отсутствующей в легенде, а четвертый - красный и отсутствующий от легенды:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
Тип: массив объектов или объект с вложенными объектами
По умолчанию: {}
тема

Тема - это набор предопределенных значений опции, которые работают вместе для достижения конкретного поведения в диаграмме или визуального эффекта. В настоящее время доступна только одна тема:

  • «Максимизированный» - максимизирует область диаграммы и рисует легенду и все этикетки внутри области диаграммы. Устанавливает следующие параметры: 
    chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
Тип: строка
По умолчанию: NULL
заголовок

Текст для отображения над диаграммой.

Тип: строка
По умолчанию: без заголовка
TitlePosition

Где разместить титул диаграммы, по сравнению с областью диаграммы. Поддерживаемые значения:

  • В - Нарисуйте заголовок внутри области диаграммы.
  • Вне - Нарисуйте заголовок за пределами области диаграммы.
  • Нет - опустить заголовок.
Тип: строка
По умолчанию: 'out'
titletextstyle

Объект, который указывает стиль текста заголовка. У объекта есть этот формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color может быть любой цветной струной HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: объект
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
подсказка

Объект с участниками для настройки различных элементов подъема инструментов. Чтобы указать свойства этого объекта, вы можете использовать буквальные нотации объекта, как показано здесь:

{textStyle: {color: '#FF0000'}, showColorCode: true}
Тип: объект
По умолчанию: NULL
Tooltip.ignoreBounds

Если установить true , позволяет рисунку подсказки потока проходить за пределами границ диаграммы со всех сторон.

Примечание: это относится только к HTML -подсказкам. Если это включено с помощью подсказки SVG, любое переполнение за пределами границ диаграммы будет обрезано. См. Настройку контента подъема инструментов для получения более подробной информации.

Тип: логический
По умолчанию: ложь
Tooltip.ishtml

Если установить в True, используйте HTML-Рендерридные (а не SVG-Рендерные) подсказки инструментов. См. Настройку контента подъема инструментов для получения более подробной информации.

ПРИМЕЧАНИЕ. Настройка контента HTML -подсказок с помощью роли данных столбца инструментов не поддерживается визуализацией пузырьковой диаграммы .

Тип: логический
По умолчанию: ложь
Tooltip.showcolorCode

Если это правда, покажите цветные квадраты рядом с информацией серии в подсказке. По умолчанию верно, когда focusTarget установлен на «категорию», в противном случае по умолчанию неверно.

Тип: логический
По умолчанию: автоматическое
Tooltip.TextStyle

Объект, который указывает стиль текста подъема инструментов. У объекта есть этот формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color может быть любой цветной струной HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: объект
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
Tooltip.trigger

Взаимодействие с пользователем, которое приводит к отображению подъема инструментов:

  • «Фокус» - подсказка инструментов будет отображаться, когда пользователь будет зависать над элементом.
  • «Нет» - подсказка не будет отображаться.
  • «Выбор» - подсказка инструментов будет отображаться, когда пользователь выбирает элемент.
Тип: строка
По умолчанию: «Фокус»
Тенденные линии

Отображает линии тренда на диаграммах, которые их поддерживают. По умолчанию используются линейные линии тренда, но это можно настроить с помощью trendlines. n .type Option.

Линии тренда указаны на основе каждого серии, поэтому в большинстве случаев ваши варианты будут выглядеть так:

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
Тип: объект
По умолчанию: NULL
Trendlines.n.color

Цвет линии тренда , выраженный как английское название цвета или шестнадцатеричную струну.

Тип: строка
По умолчанию: цвет серии по умолчанию
Trendlines.n.degree

Для линий типа type: 'polynomial' , степень полинома ( 2 для квадратичного, 3 для кубического и т. Д.). (Степень по умолчанию может измениться с 3 на 2 в предстоящем выпуске Google Charts.)

Тип: номер
По умолчанию: 3
Trendlines.n.labelinlegend

Если установить, линия тренда появится в легенде в качестве этой строки.

Тип: строка
По умолчанию: NULL
Trendlines.n.linewidth

Ширина линии линии тренда , в пикселях.

Тип: номер
По умолчанию: 2
Trendlines.n.opacity

Прозрачность линии тренда от 0,0 (прозрачная) до 1,0 (непрозрачная).

Тип: номер
По умолчанию: 1,0
Trendlines.n.pointsize

Тенденные линии постоянны путем штампа кучу точек на графике; Этот редко необходимый вариант позволяет настроить размер точек. Опция lineWidth Trendline обычно предпочтительнее. Тем не менее, вам понадобится этот вариант, если вы используете опцию Global pointSize и хотите другой размер точек для ваших линий тренда.

Тип: номер
По умолчанию: 1
Trendlines.n.pointsvisible

Тенденные линии постоянны путем штампа кучу точек на графике. Опция pointsVisible точек тренда определяет, видимы ли точки для определенной линии тренда.

Тип: логический
По умолчанию: True
Trendlines.n.showr2

Показать ли коэффициент определения в легенде или подсказке инструментов Trendline.

Тип: логический
По умолчанию: ложь
Trendlines.n.type

Независимо от того, является ли линии тренда 'linear' (по умолчанию), 'exponential' или 'polynomial' .

Тип: строка
По умолчанию: линейный
Trendlines.n.visibleinlegend

Появляется ли уравнение линии тренда в легенде. (Он появится в подсказке инструментов Trendline.)

Тип: логический
По умолчанию: ложь
Vaxis

Объект с членами для настройки различных элементов вертикальной оси. Чтобы указать свойства этого объекта, вы можете использовать буквальные нотации объекта, как показано здесь:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Тип: объект
По умолчанию: NULL
Vaxis.baseline

свойство vAxis , которое указывает базовую линию для вертикальной оси. Если базовая линия больше, чем самая высокая линия сетки или меньше, чем самая низкая линия сетки, она будет округлена до ближайшей линии сетки.

Этот вариант поддерживается только для continuous оси.

Тип: номер
По умолчанию: автоматическое
vaxis.baselinecolor

Определяет цвет базовой линии для вертикальной оси. Может быть любая цветная строка HTML, например: 'red' или '#00cc00' .

Этот вариант поддерживается только для continuous оси.

Тип: номер
По умолчанию: 'черный'
vaxis. direction

Направление, в котором растут значения вдоль вертикальной оси. По умолчанию низкие значения находятся в нижней части диаграммы. Укажите -1 , чтобы отменить порядок значений.

Тип: 1 или -1
По умолчанию: 1
vaxis.format

Строка формата для цифровых или дневных меток оси.

Для метки оси числовых оси это подмножество набора шаблонов Десятичного форматирования форматирования ОИТ . Например, {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 миллионов)

Для меток оси даты это подмножество набора шаблонов форматирования даты. Например, {format:'MMM d, y'} отобразит значение «1 июля 2011 года» на дату первого июля в 2011 году.

Фактическое форматирование, применяемое к этикетке, получено из локализации, с которой API был загружен. Для получения более подробной информации см. Загрузочные диаграммы с определенной локалью .

При вычислении значений клещей и линий сетки будут рассмотрены несколько альтернативных комбинаций всех соответствующих вариантов сетки, и альтернативы будут отклонены, если форматированные метки клещей будут дублироваться или перекрываться. Таким образом, вы можете указать format:"#" если вы хотите показать только целочисленные значения тика, но имейте в виду, что если альтернатива не удовлетворяет это условие, не будет показано никаких сетей или клещей.

Этот вариант поддерживается только для continuous оси.

Тип: строка
По умолчанию: Auto
vaxis.gridlines

Объект с членами для настройки линий сетки на вертикальной оси. Обратите внимание, что сетки с вертикальной осью нарисованы горизонтально. Чтобы указать свойства этого объекта, вы можете использовать буквальные нотации объекта, как показано здесь:

{color: '#333', minSpacing: 20}

Этот вариант поддерживается только для continuous оси.

Тип: объект
По умолчанию: NULL
vaxis.gridlines.color

Цвет вертикальных сетки внутри области диаграммы. Укажите действительную цветную строку HTML.

Тип: строка
По умолчанию: '#ccc'
vaxis.gridlines.count

Приблизительное количество горизонтальных сетки внутри области диаграммы. Если вы указали положительное число для gridlines.count , оно будет использовано для вычисления minSpacing между сетками. Вы можете указать значение 1 , чтобы нарисовать только одну линию сетки или 0 , чтобы нарисовать линии сетки. Укажите -1, который является по умолчанию, чтобы автоматически вычислять количество линий сетки на основе других параметров.

Тип: номер
По умолчанию: -1
vaxis.gridlines.units

Переопределяет формат по умолчанию для различных аспектов даты/DateTime/TimeOfday Типы данных при использовании с диаграммой вычисленных линий сетей. Позволяет форматировать в течение многих лет, месяцев, дней, часов, минут, секунд и миллисекундов.

Общий формат:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}

Дополнительную информацию можно найти в даты и время .

Тип: объект
По умолчанию: NULL
vaxis.minorgridlines

Объект с членами для настройки незначительных сетей на вертикальной оси, аналогично опции vaxis.gridlines.

Этот вариант поддерживается только для continuous оси.

Тип: объект
По умолчанию: NULL
vaxis.minorgridlines.color

Цвет вертикальных незначительных сетки в области диаграммы. Укажите действительную цветную строку HTML.

Тип: строка
По умолчанию: смесь линии сетки и фоновых цветов
vaxis.minorgridlines.count

Опция MinorGridlines.count в основном устарел, за исключением отключения незначительных сетей, устанавливая счет на 0. Количество незначительных линий сетки зависит от интервала между основными сетками (см. Vaxis.Gridlines.Interval) и минимально требуемое пространство (см. Vaxis. Minorgridlines.minspacing).

Тип: номер
По умолчанию: 1
vaxis.minorgridlines.units

Переопределяет формат по умолчанию для различных аспектов даты/DateTime/TimeOfday Tipes, когда используется с диаграммой вычисленной миноргидлины. Позволяет форматировать в течение многих лет, месяцев, дней, часов, минут, секунд и миллисекундов.

Общий формат:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

Дополнительную информацию можно найти в даты и время .

Тип: объект
По умолчанию: NULL
vaxis.logscale

Если это правда, делает вертикальную ось логарифмической шкалой. Примечание: все значения должны быть положительными.

Этот вариант поддерживается только для continuous оси.

Тип: логический
По умолчанию: ложь
vaxis.scaletype

Свойство vAxis , которое делает вертикальную ось логарифмической шкалой. Может быть одним из следующих:

  • NULL - логарифмическое масштабирование не выполняется.
  • «log» - логарифмическое масштабирование. Отрицательные и нулевые значения не построены. Эта опция совпадает с настройкой vAxis: { logscale: true } .
  • «Зернорлог» - логарифмическое масштабирование, в котором отрицательные и нулевые значения построены. Построенное значение отрицательного числа является отрицательным от журнала абсолютного значения. Значения, близкие к 0, построены в линейной шкале.
Тип: строка
По умолчанию: NULL
Vaxis.TextPosition

Положение текста вертикальной оси относительно области диаграммы. Поддерживаемые значения: «out», «в», «нет».

Тип: строка
По умолчанию: 'out'
vaxis.textstyle

Объект, который указывает стиль текста вертикальной оси. У объекта есть этот формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color может быть любой цветной струной HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: объект
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vaxis.ticks

Заменяет автоматически сгенерированные клещи Y-ось Y на указанный массив. Каждый элемент массива должен быть либо действительным значением клеща (например, число, дата, дат -временное или время), либо объектом. Если это объект, он должен иметь свойство v для значения тика и дополнительное свойство f , содержащее буквальную строку, которая будет отображаться в качестве метки.

ViewWindow будет автоматически расширен, чтобы включать тика Min и Max, если вы не указате viewWindow.min или viewWindow.max для переопределения.

Примеры:

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

Этот вариант поддерживается только для continuous оси.

Тип: массив элементов
По умолчанию: Auto
vaxis.title

Свойство vAxis , которое указывает заголовок для вертикальной оси.

Тип: строка
По умолчанию: без заголовка
vaxis.titletextstyle

Объект, который указывает стиль текста с вертикальной осью. У объекта есть этот формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color может быть любой цветной струной HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: объект
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vaxis.maxvalue

Перемещает максимальное значение вертикальной оси к указанному значению; Это будет вверх в большинстве графиков. Игнорируется, если это установлено значение меньше, чем максимальное значение y данных. vAxis.viewWindow.max переопределяет это свойство.

Этот вариант поддерживается только для continuous оси.

Тип: номер
По умолчанию: автоматическое
vaxis.minvalue

Перемещает значение MIN вертикальной оси к указанному значению; Это будет вниз в большинстве графиков. Игнорируется, если это установлено значение, превышающему минимальное значение y данных. vAxis.viewWindow.min переопределяет это свойство.

Этот вариант поддерживается только для continuous оси.

Тип: номер
По умолчанию: NULL
vaxis.viewwindowmode

Указывает, как масштабировать вертикальную ось, чтобы отобразить значения в области диаграммы. Поддерживаются следующие строковые значения:

  • «Довольно» - масштабируйте вертикальные значения так, чтобы максимальные и минимальные значения данных были сделаны немного в нижней и верхней части области диаграммы. ViewWindow расширяется до ближайшей основной линии сетки для чисел или ближайшей незначительной линии сетки для дат и времени.
  • «Максимизированный» - масштабируйте вертикальные значения так, чтобы максимальные и минимальные значения данных касались верхней и нижней части области диаграммы. Это приведет к тому, что vaxis.viewWindow.min и vaxis.viewWindow.max будет игнорироваться.
  • «Явный» - устаревший вариант для определения значений верхней и нижней шкалы площади диаграммы. (Установилось, потому что он избыточно с vaxis.viewWindow.min и vaxis.viewWindow.max . Значения данных за пределами этих значений будут обрезаны. Вы должны указать объект vAxis.viewWindow , описывающий максимальные и минимальные значения, чтобы показать.

Этот вариант поддерживается только для continuous оси.

Тип: строка
По умолчанию: эквивалент «красиво», но vaxis.viewWindow.min и vaxis.viewWindow.max имеет приоритет при использовании.
vaxis.viewwindow

Указывает диапазон обрезки вертикальной оси.

Тип: объект
По умолчанию: NULL
vaxis.viewwindow.max

  • Для continuous оси:

    Максимальное значение вертикального данных для рендеринга.

  • Для discrete оси:

    Индекс строк на основе нуля, где заканчивается окно обрезки. Точки данных в этом индексе и выше будут вырезаны. В сочетании с vAxis.viewWindowMode.min , он определяет полуоткрытый диапазон [мин, макс), который обозначает индексы элементов для отображения. Другими словами, каждый индекс такой, что будет отображаться min <= index < max .

Игнорируется, когда vAxis.viewWindowMode «симпатичный» или «максимизирован».

Тип: номер
По умолчанию: Auto
vaxis.viewwindow.min

  • Для continuous оси:

    Минимальное значение вертикального данных для рендеринга.

  • Для discrete оси:

    Индекс строк на основе нуля, где начинается окно обрезки. Точки данных в индексах ниже, чем это, будут обрезаны. В сочетании с vAxis.viewWindowMode.max он определяет полуоткрытый диапазон [мин, макс), который обозначает показатели элементов для отображения. Другими словами, каждый индекс такой, что будет отображаться min <= index < max . Игнорируется, когда vAxis.viewWindowMode «симпатичный» или «максимизирован».

Игнорируется, когда vAxis.viewWindowMode «симпатичный» или «максимизирован».

Тип: номер
По умолчанию: Auto
ширина

Ширина диаграммы, в пикселях.

Тип: номер
По умолчанию: ширина содержащего элемента

Методы

Метод
draw(data, options)

Рисует график. Диаграмма принимает дальнейшие вызовы метода только после того, как ready событие будет запущено. Extended description .

Возвращение типа: нет
getAction(actionID)

Возвращает объект действий подсказки инструментов с запрошенным actionID .

Возвращение типа: объект
getBoundingBox(id)

Возвращает объект, содержащий левую, верхнюю, ширину и высоту id элемента диаграммы. Формат для id еще не задокументирован (они являются возвратными значениями обработчиков событий ), но вот несколько примеров:

var cli = chart.getChartLayoutInterface();

Высота зоны графика
cli.getBoundingBox('chartarea').height
Ширина третьего бара в первой серии диаграммы бара или колонны
cli.getBoundingBox('bar#0#2').width
Ограничивающая коробка пятого клина круговой диаграммы
cli.getBoundingBox('slice#4')
Ограничивающая коробка данных диаграммы вертикальной (например, столбца) диаграммы:
cli.getBoundingBox('vAxis#0#gridline')
Ограничивающая коробка данных диаграммы горизонтальной (например, бар):
cli.getBoundingBox('hAxis#0#gridline')

Значения относительно контейнера диаграммы. Назовите это после того, как график будет нарисована.

Возвращение типа: объект
getChartAreaBoundingBox()

Возвращает объект, содержащий левую, верхнюю, ширину и высоту содержания диаграммы (то есть, исключая этикетки и легенду):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

Значения относительно контейнера диаграммы. Назовите это после того, как график будет нарисована.

Возвращение типа: объект
getChartLayoutInterface()

Возвращает объект, содержащий информацию о экране размещения диаграммы и его элементов.

Следующие методы можно вызвать на возвращаемый объект:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

Назовите это после того, как график будет нарисована.

Возвращение типа: объект
getHAxisValue(xPosition, optional_axis_index)

Возвращает горизонтальное значение данных при xPosition , которое представляет собой смещение пикселя из левого края контейнера диаграммы. Может быть отрицательным.

Пример: chart.getChartLayoutInterface().getHAxisValue(400) .

Назовите это после того, как график будет нарисована.

Возврат тип: номер
getImageURI()

Возвращает диаграмму, сериализованную как изображение URI.

Назовите это после того, как график будет нарисована.

Смотрите печатные диаграммы PNG .

Возвращение типа: строка
getSelection()

Возвращает массив выбранных диаграмм. Выбираемые сущности - это бары, записи легенды и категории. Для этой диаграммы можно выбрать только один объект в любой момент. Extended description .

Тип возврата: массив элементов выбора
getVAxisValue(yPosition, optional_axis_index)

Возвращает вертикальное значение данных при yPosition , которое представляет собой смещение пикселя вниз по верхней краю контейнера диаграммы. Может быть отрицательным.

Пример: chart.getChartLayoutInterface().getVAxisValue(300) .

Назовите это после того, как график будет нарисована.

Возврат тип: номер
getXLocation(dataValue, optional_axis_index)

Возвращает Pixel X-координату dataValue по сравнению с левым краем контейнера диаграммы.

Пример: chart.getChartLayoutInterface().getXLocation(400) .

Назовите это после того, как график будет нарисована.

Возврат тип: номер
getYLocation(dataValue, optional_axis_index)

Возвращает Pixel Y-координату dataValue по сравнению с верхним краем контейнера диаграммы.

Пример: chart.getChartLayoutInterface().getYLocation(300) .

Назовите это после того, как график будет нарисована.

Возврат тип: номер
removeAction(actionID)

Удаляет действие подсказки инструментов с помощью запрошенного actionID из диаграммы.

Возвращение типа: none
setAction(action)

Устанавливает действие подсказки инструментов для выполнения, когда пользователь нажимает на текст действия.

Метод setAction принимает объект в качестве параметра действия. Этот объект должен указать 3 свойства: id - идентификатор установленного действия, text - текст, который должен отображаться в всплеске инструментов для действия, и action - функцию, которую следует запускать, когда пользователь нажимает на текст действия.

Любые действия по всплеске инструментов должны быть установлены до вызова метода draw() . Расширенное описание .

Возвращение типа: none
setSelection()

Выбирает указанные диаграммы. Отменяет любой предыдущий выбор. Выбираемые сущности - это бары, записи легенды и категории. Для этой диаграммы можно выбрать только один объект. Extended description .

Возвращение типа: нет
clearChart()

Очищает диаграмму и выпускает все его выделенные ресурсы.

Возвращение типа: нет

События

Для получения дополнительной информации о том, как использовать эти события, см. Базовую интерактивность , обработку событий и стрельбы .

Имя
animationfinish

Уволен, когда переходная анимация завершена.

Свойства: нет
click

Запускается, когда пользователь щелкнет внутри диаграммы. Можно использовать для определения того, когда нажимают заголовок, элементы данных, записи легенды, оси, сетки или метки.

Свойства: TargetId
error

Уволен, когда возникает ошибка при попытке отобрать диаграмму.

Свойства: ID, сообщение
legendpagination

Запускается, когда пользователь нажимает стрелки Legend Pagination. Обращает обратно текущий индекс страниц на основе Legend Zero и общее количество страниц.

Свойства: CurrentPageIndex, TotalPages
onmouseover

Уволен, когда пользователь объединяет визуальную сущность. Передает индексы строки и столбца соответствующего элемента таблицы данных. Бар коррелирует с ячейкой в ​​таблице данных, ввод легенды в столбце (индекс строки равна нулю), а категория к строке (индекс столбца - нулевой).

Свойства: ряд, столбец
onmouseout

Выстрелил, когда пользователь уходит от визуальной сущности. Передает индексы строки и столбца соответствующего элемента таблицы данных. Бар коррелирует с ячейкой в ​​таблице данных, ввод легенды в столбце (индекс строки равна нулю), а категория к строке (индекс столбца - нулевой).

Свойства: ряд, столбец
ready

Диаграмма готова к внешним вызовам метода. Если вы хотите взаимодействовать с диаграммой и вызовать методы после того, как вы нарисуете его, вам следует настроить слушателя для этого события , прежде чем позвонить в метод draw , и позвонить им только после того, как событие было запущено.

Свойства: нет
select

Уволен, когда пользователь нажимает на визуальную сущность. Чтобы узнать, что было выбрано, позвоните getSelection() .

Свойства: нет

Политика данных

Все код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.