Визуализация: пузырьковая диаграмма

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

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

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

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

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

• in — рисовать заголовки осей внутри области диаграммы.
• out — Нарисуйте заголовки осей за пределами области диаграммы.
• none — не указывать заголовки осей.

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

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

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

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

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

Непрозрачность пузырьков, где 0 — полностью прозрачный, а 1 — полностью непрозрачный.

Цвет обводки пузырьков.

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

{color: <string>, fontName: <string>, fontSize: <number>}

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

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

• stroke : цвет, представленный в виде шестнадцатеричной строки или имени цвета на английском языке.
• strokeWidth : если указано, рисует границу вокруг области диаграммы заданной ширины (и с цветом stroke ).

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

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

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

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

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

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

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}

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

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

Если присутствует, управляет тем, как значения связаны с цветами. Каждое значение связано с соответствующим цветом в массиве colorAxis.colors . Эти значения применяются к данным цвета диаграммы. Окрашивание выполняется в соответствии с градиентом значений, указанных здесь. Отсутствие указания значения для этой опции эквивалентно указанию [minValue, maxValue].

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

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

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

• 'top' - Над диаграммой.
• 'bottom' - Под графиком.
• 'in' — внутри диаграммы, вверху.
• 'none' - Легенда не отображается.

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

{color: <string>, fontName: <string>, fontSize: <number>}

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

Строка формата для числовых меток. Это подмножество набора шаблонов ICU . Например, {numberFormat:'.##'} будет отображать значения "10,66", "10,6" и "10,0" для значений 10,666, 10,6 и 10.

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

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

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

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

Проводник Google Charts поддерживает три действия:

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

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

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

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

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

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

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

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

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

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

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    

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

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

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

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

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

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

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

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

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

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

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

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

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

Переопределяет формат по умолчанию для различных аспектов типов данных 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 свойство, которое делает горизонтальную ось логарифмической шкалой (требует, чтобы все значения были положительными). Установите значение true для да.

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

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

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

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

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

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

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

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

Примеры:

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

hAxis , указывающее заголовок горизонтальной оси.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}

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

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

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

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

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

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

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

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

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

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

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

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

Когда selectionMode имеет 'multiple' , пользователи могут выбирать несколько точек данных.

Объект объектов, где ключами являются названия рядов (значения в столбце Цвет) и каждый объект, описывающий формат соответствующего ряда на диаграмме. Если серия или значение не указаны, будет использоваться глобальное значение. Каждый объект поддерживает следующие свойства:

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

series: {'Europe': {color: 'green'}}

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

 {minValue: 0,  maxSize: 20}

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

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

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

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

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

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

• «максимизированный» — максимизирует область диаграммы и рисует легенду и все метки внутри области диаграммы. Устанавливает следующие параметры:

  chartArea: {width: '100%', height: '100%'},
  legend: {position: 'in'},
  titlePosition: 'in', axisTitlesPosition: 'in',
  hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
          

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

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

• in — Нарисуйте заголовок внутри области диаграммы.
• out — вывести заголовок за пределы области диаграммы.
• none - пропустить заголовок.

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

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

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

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

{textStyle: {color: '#FF0000'}, showColorCode: true}

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

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

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

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

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

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

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

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

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заменяет автоматически сгенерированные метки оси 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 , указывающее заголовок вертикальной оси.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Возвращает объект, содержащий левый, верхний, ширину и высоту 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')

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

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

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left

cli.getChartAreaBoundingBox().top

cli.getChartAreaBoundingBox().height

cli.getChartAreaBoundingBox().width

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

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

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

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

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

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

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

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

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

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

См. Печать диаграмм PNG .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Очищает диаграмму и освобождает все выделенные ей ресурсы.

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

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

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

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

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

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

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

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