Гистограмма

Обзор

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

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 расширяют диапазон сегментов, но учтите, что если есть данные за пределами этого диапазона, эти параметры не уменьшат диапазон.

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

Также обратите внимание, что мы 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
анимация.easing

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

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

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

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

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

  • 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, диаграмма не будет генерировать события «выбор» или другие события, основанные на взаимодействии (но будет генерировать события готовности или ошибки), а также не будет отображать наводящий текст или иным образом изменяться в зависимости от ввода пользователя.

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

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

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

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

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

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

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

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

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

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

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

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

{
  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

Переопределяет формат по умолчанию для различных аспектов типов данных date/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*/]},
  }
}

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

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

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

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

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

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

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

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

Параметр majorGridlines.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 при использовании с вычисляемыми диаграммами 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.textPosition

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

Тип: строка
По умолчанию: «выход»
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.maxАльтернация

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{textStyle: {color: '#FF0000'}, showColorCode: true}
Тип: объект
По умолчанию: ноль
подсказка.isHtml

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

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

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

Если это правда, отображайте цветные квадраты рядом с информацией о серии во всплывающей подсказке. Значение по умолчанию — true, если для focusTarget установлено значение «category», в противном случае значение по умолчанию — 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>}
подсказка.триггер

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

  • «фокус» — всплывающая подсказка будет отображаться, когда пользователь наводит курсор на элемент.
  • «нет» — всплывающая подсказка не будет отображаться.
Тип: строка
По умолчанию: «фокус»
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
  }
]
Тип: Массив объектов или объект с дочерними объектами.
По умолчанию: ноль
вАксис

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

{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 , MINSPACE вычисляется из подсчета. И наоборот, если вы указываете minSpacing , а не count , счет вычисляется из Minspacing. Если вы указываете оба, то minSpacing отменяет.

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

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

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

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

Тип: объект
По умолчанию: ноль
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 майки основных линий сетки для линейных шкал и 1/5 Minspacing для шкал журналов.

Тип: номер
По умолчанию: вычисляется
vaxis.minorgridlines.multiple

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Игнорируется, когда 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() .

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

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

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