Гистограмма

Обзор

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

Google Charts автоматически выбирает количество бинов для вас. Все бины имеют одинаковую ширину и высоту, пропорциональную количеству точек данных в бине. В остальном гистограммы похожи на гистограммы .

Пример

Вот гистограмма длин динозавров:

Гистограмма говорит нам, что самый распространенный бин меньше 10 метров, и что есть только один динозавр выше 40 метров. Мы можем навести курсор на полосу и обнаружить, что это сейсмозавр (который может быть просто очень большим диплодоком; палеонтологи не уверены ).

Код для создания этой гистограммы показан ниже. После определения данных (здесь с помощью google.visualization.arrayToDataTable ) диаграмма определяется с помощью вызова google.visualization.Histogram и рисуется с помощью метода draw .

<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(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Dinosaur', 'Length'],
          ['Acrocanthosaurus (top-spined lizard)', 12.2],
          ['Albertosaurus (Alberta lizard)', 9.1],
          ['Allosaurus (other lizard)', 12.2],
          ['Apatosaurus (deceptive lizard)', 22.9],
          ['Archaeopteryx (ancient wing)', 0.9],
          ['Argentinosaurus (Argentina lizard)', 36.6],
          ['Baryonyx (heavy claws)', 9.1],
          ['Brachiosaurus (arm lizard)', 30.5],
          ['Ceratosaurus (horned lizard)', 6.1],
          ['Coelophysis (hollow form)', 2.7],
          ['Compsognathus (elegant jaw)', 0.9],
          ['Deinonychus (terrible claw)', 2.7],
          ['Diplodocus (double beam)', 27.1],
          ['Dromicelomimus (emu mimic)', 3.4],
          ['Gallimimus (fowl mimic)', 5.5],
          ['Mamenchisaurus (Mamenchi lizard)', 21.0],
          ['Megalosaurus (big lizard)', 7.9],
          ['Microvenator (small hunter)', 1.2],
          ['Ornithomimus (bird mimic)', 4.6],
          ['Oviraptor (egg robber)', 1.5],
          ['Plateosaurus (flat lizard)', 7.9],
          ['Sauronithoides (narrow-clawed lizard)', 2.0],
          ['Seismosaurus (tremor lizard)', 45.7],
          ['Spinosaurus (spiny lizard)', 12.2],
          ['Supersaurus (super lizard)', 30.5],
          ['Tyrannosaurus (tyrant lizard)', 15.2],
          ['Ultrasaurus (ultra lizard)', 30.5],
          ['Velociraptor (swift robber)', 1.8]]);

        var options = {
          title: 'Lengths of dinosaurs, in meters',
          legend: { position: 'none' },
        };

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

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

Управление цветами

Вот гистограмма населения страны:

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

В этой гистограмме используется опция colors , чтобы отобразить данные зеленым цветом:

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['green'],
  };

Как и во всех диаграммах Google, цвета могут быть указаны либо в виде английских названий, либо в виде шестнадцатеричных значений.

Управление ковшами

По умолчанию Google Charts автоматически выбирает размер корзины, используя известный алгоритм для гистограмм. Однако иногда вы захотите переопределить это, и приведенная выше диаграмма является примером. С таким количеством стран в первой корзине трудно исследовать другие страны.

Для подобных ситуаций диаграмма гистограммы предоставляет два параметра: histogram.bucketSize , который переопределяет алгоритм и жестко задает размер сегмента; и histogram.lastBucketPercentile . Второй вариант нуждается в дополнительных пояснениях: он изменяет вычисление размеров сегментов, чтобы игнорировать значения, которые выше или ниже остальных значений на указанный вами процент. Значения по-прежнему включаются в гистограмму, но не влияют на то, как они группируются. Это полезно, когда вы не хотите, чтобы выбросы попадали в свои корзины; вместо этого они будут сгруппированы с первым или последним сегментом.

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

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

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['#e7711c'],
    histogram: { lastBucketPercentile: 5 },
    vAxis: { scaleType: 'mirrorLog' }
  };

Как вы можете видеть, удаление верхних и нижних пяти процентов из расчетов привело к размеру корзины 10 000 000, а не 100 000 000, как в противном случае. Если бы вы все время знали, что вам нужен размер корзины 10 000 000, вы могли бы использовать для этого histogram.bucketSize :

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['#e7711c'],
    histogram: { bucketSize: 10000000 }
  };

В следующем примере мы покажем, как расширить диапазон сегментов и отобразить гораздо больше сегментов без промежутка между ними. Параметр maxNumBuckets можно использовать для увеличения количества сегментов по умолчанию. Параметры histogram.minValue и histogram.maxValue расширят диапазон корзин, но обратите внимание, что если есть данные за пределами этого диапазона, эти параметры не уменьшат диапазон.

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

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

  var options = {
    title: 'Approximating Normal Distribution',
    legend: { position: 'none' },
    colors: ['#4285F4'],

    chartArea: { width: 405 },
    hAxis: {
      ticks: [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1]
    },
    bar: { gap: 0 },

    histogram: {
      bucketSize: 0.01,
      maxNumBuckets: 400,
      minValue: -1,
      maxValue: 1
    }
  };

Несколько серий

Вот гистограмма зарядов субатомных частиц согласно Стандартной модели :

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

На этой диаграмме мы используем разные серии (и, следовательно, цвета) для каждого из четырех типов субатомных частиц. Мы явно устанавливаем для interpolateNulls значение false , чтобы гарантировать, что нулевые значения (необходимые, поскольку ряды имеют неравную длину) не отображаются на графике. Мы также устанавливаем legend.maxLines , чтобы добавить еще одну строку в легенду:

  var data = google.visualization.arrayToDataTable([
    ['Quarks', 'Leptons', 'Gauge Bosons', 'Scalar Bosons'],
    [2/3, -1, 0, 0],
    [2/3, -1, 0, null],
    [2/3, -1, 0, null],
    [-1/3, 0, 1, null],
    [-1/3, 0, -1, null],
    [-1/3, 0, null, null],
    [-1/3, 0, null, null]
  ]);

  var options = {
    title: 'Charges of subatomic particles',
    legend: { position: 'top', maxLines: 2 },
    colors: ['#5C3292', '#1A8763', '#871B47', '#999999'],
    interpolateNulls: false,
  };

Загрузка

Имя пакета google.charts.load — "corechart" .

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

Имя класса визуализации — google.visualization.Histogram :

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

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

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

  var data = google.visualization.arrayToDataTable([
    ['Name', 'Number'],
    ['Name 1', number1],
    ['Name 2', number2],
    ['Name 3', number3],
    ...
  ]);

... и когда есть несколько серий:

  var data = google.visualization.arrayToDataTable([
    ['Series Name 1', 'Series Name 2', 'Series Name 3', ...],
    [series1_number1, series2_number1, series3_number1, ...],
    [series1_number2, series2_number2, series3_number2, ...],
    [series1_number3, series2_number3, series3_number3, ...],
    ...
  ]);

На данный момент дополнительные роли столбцов для гистограмм не поддерживаются.

Параметры конфигурации

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тип: номер
По умолчанию: 0
backgroundColor.fill

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

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

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

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

Как далеко рисовать график от левой границы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тип: строка
По умолчанию: «Arial».
ForceIFrame

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

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

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

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

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

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

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

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

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

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

Массив размеров (в виде значений данных, а не пикселей) между соседними линиями сетки. В настоящее время этот параметр предназначен только для числовых осей, но он аналогичен параметрам gridlines.units.<unit>.interval , которые используются только для дат и времени. Для линейных масштабов значение по умолчанию — [1, 2, 2.5, 5] что означает, что значения линии сетки могут падать на каждую единицу (1), на четные единицы (2) или на кратные 2,5 или 5. Любая степень 10 раз эти значения также учитываются (например, [10, 20, 25, 50] и [.1, .2, .25, .5]). Для логарифмических масштабов значение по умолчанию — [1, 2, 5] .

Тип: число от 1 до 10, не включая 10.
По умолчанию: вычислено
hAxis.gridlines.minSpacing

Минимальное пространство экрана в пикселях между основными линиями сетки hAxis. Значение по умолчанию для основных линий сетки равно 40 для линейных масштабов и 20 для логарифмических масштабов. Если вы укажете count , а не minSpacing , minSpacing вычисляется из счетчика. И наоборот, если вы укажете minSpacing а не count , счетчик будет вычисляться из minSpacing. Если вы укажете оба, minSpacing переопределяет.

Тип: номер
По умолчанию: вычислено
hAxis.gridlines.multiple

Все значения линий сетки и делений должны быть кратны значению этого параметра. Обратите внимание, что, в отличие от интервалов, степени, умноженные на 10, не учитываются. Таким образом, вы можете заставить тики быть целыми числами, указав gridlines.multiple = 1 , или заставить тики быть кратными 1000, указав gridlines.multiple = 1000 .

Тип: номер
По умолчанию: 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.interval

Параметр minorGridlines.interval аналогичен параметру интервала основных линий сетки, но выбранный интервал всегда будет четным делителем интервала основных линий сетки. Интервал по умолчанию для линейных масштабов — [1, 1.5, 2, 2.5, 5] , а для логарифмических масштабов — [1, 2, 5] .

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

Минимальное необходимое пространство в пикселях между соседними второстепенными линиями сетки и между второстепенными и основными линиями сетки. Значение по умолчанию — 1/2 minSpacing основных линий сетки для линейных масштабов и 1/5 minSpacing для логарифмических масштабов.

Тип: номер
По умолчанию: вычислено
hAxis.minorGridlines.multiple

То же, что и для основных gridlines.multiple .

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

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

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

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.textPosition

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

Тип: строка
По умолчанию: «вне»
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.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.allowContainerBoundaryTextCutoff

Если задано значение false, крайние метки будут скрыты, а не будут обрезаны контейнером диаграммы. Если true, будет разрешена обрезка метки.

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

Если установлено значение true, нарисуйте текст по горизонтальной оси под углом, чтобы разместить больше текста вдоль оси; если false, нарисуйте текст по горизонтальной оси вертикально. Поведение по умолчанию — наклон текста, если он не может полностью уместиться при вертикальном рисовании. Обратите внимание, что этот параметр доступен только в том случае, если для hAxis.textPosition установлено значение «out» (по умолчанию). Значение по умолчанию false для дат и времени.

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

Угол текста по горизонтальной оси, если он нарисован под наклоном. Игнорируется, если hAxis.slantedText имеет значение false или находится в автоматическом режиме, а диаграмма решила отобразить текст горизонтально. Если угол положительный, то вращение происходит против часовой стрелки, а если отрицательный, то по часовой стрелке.

Тип: число, -90—90
По умолчанию: 30
hAxis.maxAlternation

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

Тип: номер
По умолчанию: 2
hAxis.maxTextLines

Максимально допустимое количество строк для текстовых меток. Метки могут занимать несколько строк, если они слишком длинные, а количество строк по умолчанию ограничено высотой доступного пространства.

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

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

Тип: номер
По умолчанию: значение hAxis.textStyle.fontSize
hAxis.showTextEvery

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Опустите тонкие деления между блоками гистограммы, превратив ее в серию сплошных полос.

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

При расчете размера корзины гистограммы игнорируйте верхний и нижний lastBucketPercentile . Значения по-прежнему включаются в гистограмму, но не влияют на группировку.

Тип: номер
По умолчанию: 0
гистограмма.minValue

Расширьте диапазон сегментов, чтобы включить это значение.

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

Расширьте диапазон сегментов, чтобы включить это значение.

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

Как вычислить количество бакетов по умолчанию. Возможные значения:

  • 'sqrt' — вычисляет квадратный корень из числа точек данных.
  • 'sturges' — получено из биномиального распределения. Неявно предполагает приблизительно нормальное распределение.
  • 'rice' — более простая альтернатива правилу Стерджеса.
Для получения дополнительной информации см. Википедия - Гистограмма: количество интервалов и ширина

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

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

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

Угадывать ли значение недостающих очков. Если это правда, он будет угадывать значение любых отсутствующих данных на основе соседних точек. Если false, это оставит разрыв в линии в неизвестной точке.

Это не поддерживается диаграммами с областями с параметром isStacked isStacked: true/'percent'/'relative'/'absolute' .

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

Если установлено значение true, элементы для всех рядов складываются в стопки для каждого значения домена. Примечание. В диаграммах Column , Area и SteppedArea 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}}
Тип: объект
По умолчанию: ноль
легенда.выравнивание

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

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

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

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

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

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

В настоящее время эта опция работает только в том случае, если legend.position имеет значение «top».

Тип: номер
По умолчанию: 1
legend.pageIndex

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

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

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

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

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

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

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

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

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

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

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

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'}
Тип: строка
По умолчанию: ноль
заглавие

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

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

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

  • in — Нарисуйте заголовок внутри области диаграммы.
  • out — вывести заголовок за пределы области диаграммы.
  • none - пропустить заголовок.
Тип: строка
По умолчанию: «вне»
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}
Тип: объект
По умолчанию: ноль
tooltip.isHtml

Если установлено значение true, используйте всплывающие подсказки в формате HTML (а не в формате SVG). Дополнительные сведения см. в разделе Настройка содержимого всплывающей подсказки .

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

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

Если это правда, показывать цветные квадраты рядом с информацией о серии во всплывающей подсказке. Значение по умолчанию — true, если focusTarget установлено значение «категория», в противном случае значение по умолчанию — false.

Тип: логический
По умолчанию: автоматически
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>}
всплывающая подсказка.триггер

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

  • «фокус» — всплывающая подсказка будет отображаться, когда пользователь наводит курсор на элемент.
  • 'none' - всплывающая подсказка не будет отображаться.
Тип: строка
По умолчанию: «фокус».
vAxes

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

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

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}

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

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

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

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

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

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

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

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

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

Тип: 1 или -1
По умолчанию: 1
vAxis.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:"#" , если вы хотите отображать только целые значения делений, но имейте в виду, что если никакая альтернатива не удовлетворяет этому условию, линии сетки или деления отображаться не будут.

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

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

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

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

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

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

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

Массив размеров (в виде значений данных, а не пикселей) между соседними линиями сетки. В настоящее время этот параметр предназначен только для числовых осей, но он аналогичен параметрам gridlines.units.<unit>.interval , которые используются только для дат и времени. Для линейных масштабов значение по умолчанию — [1, 2, 2.5, 5] что означает, что значения линии сетки могут падать на каждую единицу (1), на четные единицы (2) или на кратные 2,5 или 5. Любая степень 10 раз эти значения также учитываются (например, [10, 20, 25, 50] и [.1, .2, .25, .5]). Для логарифмических масштабов значение по умолчанию — [1, 2, 5] .

Тип: число от 1 до 10, не включая 10.
По умолчанию: вычислено
vAxis.gridlines.minSpacing

Минимальное пространство экрана в пикселях между основными линиями сетки hAxis. Значение по умолчанию для основных линий сетки равно 40 для линейных масштабов и 20 для логарифмических масштабов. Если вы укажете count , а не minSpacing , minSpacing вычисляется из счетчика. И наоборот, если вы укажете minSpacing а не count , счетчик будет вычисляться из minSpacing. Если вы укажете оба, minSpacing переопределяет.

Тип: номер
По умолчанию: вычислено
vAxis.gridlines.multiple

Все значения линий сетки и делений должны быть кратны значению этого параметра. Обратите внимание, что, в отличие от интервалов, степени, умноженные на 10, не учитываются. Таким образом, вы можете заставить тики быть целыми числами, указав gridlines.multiple = 1 , или заставить тики быть кратными 1000, указав gridlines.multiple = 1000 .

Тип: номер
По умолчанию: 1
vAxis.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*/]}
  }
}

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

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

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

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

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

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

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

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

Параметр minorGridlines.interval аналогичен параметру интервала основных линий сетки, но выбранный интервал всегда будет четным делителем интервала основных линий сетки. Интервал по умолчанию для линейных масштабов — [1, 1.5, 2, 2.5, 5] , а для логарифмических масштабов — [1, 2, 5] .

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

Минимальное необходимое пространство в пикселях между соседними второстепенными линиями сетки и между второстепенными и основными линиями сетки. Значение по умолчанию — 1/2 minSpacing основных линий сетки для линейных масштабов и 1/5 minSpacing для логарифмических масштабов.

Тип: номер
По умолчанию: вычислено
vAxis.minorGridlines.multiple

То же, что и для основных gridlines.multiple .

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

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

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

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*/]},
  }
}

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

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

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

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

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

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

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

Тип: строка
По умолчанию: «вне»
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 указанным массивом. Каждый элемент массива должен быть либо допустимым значением тика (например, числом, датой, датой и временем или временем дня), либо объектом. Если это объект, он должен иметь свойство v для значения отметки и необязательное свойство f , содержащее литеральную строку, которая будет отображаться в качестве метки.

ViewWindow будет автоматически расширен, чтобы включить минимальные и максимальные отметки, если вы не укажете 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] }
Тип: Массив элементов
По умолчанию: авто
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 переопределяет это свойство.

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

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

Тип: номер
По умолчанию: ноль
vAxis.viewWindowMode

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

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

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

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

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

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

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

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

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

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

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

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

Методы

Метод
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)

Возвращает x-координату dataValue относительно левого края контейнера диаграммы.

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

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

Тип возврата: число
getYLocation(dataValue, optional_axis_index)

Возвращает 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

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

Свойства: идентификатор, сообщение
legendpagination

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

Свойства: currentPageIndex, totalPages
onmouseover

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

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

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

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

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

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

Запускается, когда пользователь щелкает визуальный объект. Чтобы узнать, что было выбрано, вызовите getSelection() .

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

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

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