Устаревший
Эта визуализация была заменена новой версией ; пожалуйста, используйте это вместо этого. Чтобы упростить миграцию, обратитесь к странице примечаний к выпуску .
Обзор
Горизонтальная гистограмма, отображаемая в браузере с использованием SVG или VML. Отображает подсказки при нажатии на точки. Анимирует линии при нажатии на записи легенды. Вертикальную версию этой диаграммы см. в столбчатой диаграмме .
Автор: Google
Пример
Программируйте сами на игровой площадке визуализации
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["barchart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var chart = new google.visualization.BarChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Company Performance'}); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
Загрузка
Имя пакета google.load
— "barchart"
google.load("visualization", "1", {packages: ["barchart"]});
Имя класса визуализации — google.visualization.BarChart
var visualization = new google.visualization.BarChart(container);
Формат данных
Каждая строка в таблице представляет собой группу смежных стержней.
Первый столбец в таблице должен быть строкой и представлять метку этой группы баров. За ним может следовать любое количество столбцов, все числовые, каждый из которых представляет столбцы одного цвета и относительного положения в каждой группе.
Значение в заданной строке и столбце определяет высоту одной полосы, представленной этой строкой и столбцом.
Параметры конфигурации
Имя | Тип | По умолчанию | Описание |
---|---|---|---|
осьЦвет | строка или объект | цвет по умолчанию | Цвет оси. Возможные значения аналогичны параметрам конфигурации backgroundColor . |
осьфонЦвет | строка или объект | цвет по умолчанию | Граница вокруг фона оси. Возможные значения аналогичны параметрам конфигурации backgroundColor . |
осьFontSize | количество | автоматический | Размер шрифта текста оси диаграммы в пикселях. |
фоновый цвет | строка или объект | цвет по умолчанию | Цвет фона для основной области диаграммы. Может быть один из следующих вариантов:
|
цвет границы | строка или объект | цвет по умолчанию | Граница вокруг элементов диаграммы. Возможные значения аналогичны параметрам конфигурации backgroundColor . |
цвета | Массив строк или объектов | Цвета по умолчанию | Массив цветов, где каждый элемент определяет цвет одной серии. Вы должны указать один элемент массива для каждой серии.
|
включитьПодсказка | логический | истинный | Если установлено значение true, всплывающие подсказки отображаются, когда пользователь щелкает панель. |
фокусГраницаЦвет | строка или объект | цвет по умолчанию | Граница вокруг элементов диаграммы, находящихся в фокусе (наведенных мышью). Возможные значения аналогичны параметрам конфигурации backgroundColor . |
высота | количество | Высота контейнера | Высота диаграммы в пикселях. |
3D | логический | ЛОЖЬ | Если установлено значение true, отображает трехмерное изменение. |
isStacked | логический | ЛОЖЬ | Если установлено значение true, значения строки складываются (накапливаются). |
легенда | нить | 'Правильно' | Положение и тип легенды. Может быть одним из следующих:
|
легендаФонЦвет | строка или объект | цвет по умолчанию | Цвет фона области легенды диаграммы. Возможные значения аналогичны параметрам конфигурации backgroundColor . |
легендаШрифтРазмер | количество | автоматический | Размер шрифта легенды в пикселях. |
легендатекстцвет | строка или объект | цвет по умолчанию | Цвет текста легенды. Возможные значения аналогичны параметрам конфигурации backgroundColor . |
logScale | логический | ЛОЖЬ | Если это правда, главная ось должна масштабироваться логарифмически. |
Максимум | количество | автоматический | Указывает самую высокую линию сетки по оси Y. Фактическая линия сетки будет большим из двух значений: максимальное значение параметра или наибольшее значение данных, округленное до следующей более высокой отметки сетки. |
мин | количество | автоматический | Задает самую нижнюю линию сетки по оси Y. Фактическая линия сетки будет наименьшей из двух значений: минимальное значение параметра или наименьшее значение данных, округленное в меньшую сторону до следующей более низкой отметки сетки. |
обратная ось | логический | истинный | Если установлено значение true (по умолчанию), категории будут отображаться сверху вниз. Если установлено значение false, столбцы будут отображаться снизу вверх. |
показатьКатегории | логический | истинный | Если true, будут отображаться метки категорий. Если ложь, не будет. |
заглавие | нить | без заголовка | Текст для отображения над диаграммой. |
названиеX | нить | без заголовка | Текст для отображения под горизонтальной осью. |
названиеY | нить | без заголовка | Текст для отображения по вертикальной оси. |
названиеЦвет | строка или объект | цвет по умолчанию | Цвет заголовка диаграммы. Возможные значения аналогичны параметрам конфигурации backgroundColor . |
заголовокразмер шрифта | количество | автоматический | Размер шрифта заголовка диаграммы в пикселях. |
всплывающая подсказкаРазмер шрифта | количество | 11 | Размер шрифта текста всплывающей подсказки. Это может быть уменьшено, если всплывающая подсказка слишком мала для размещения текста в указанном шрифте. |
всплывающая подсказкаВысота | количество | 60 | Высота всплывающей подсказки в пикселях. Высота всплывающей подсказки фиксирована; он никогда не будет увеличиваться или уменьшаться, чтобы соответствовать длине или размеру шрифта текста. Но все, что превышает 1/3 высоты диаграммы, будет обрезано. |
всплывающая подсказкаШирина | количество | 120 | Ширина всплывающей подсказки в пикселях. Ширина всплывающей подсказки фиксирована; он никогда не будет увеличиваться или уменьшаться, чтобы соответствовать длине или размеру шрифта текста. Но все, что больше ширины диаграммы, будет обрезано. |
ширина | количество | Ширина контейнера | Ширина диаграммы в пикселях. |
Методы
Метод | Тип возврата | Описание |
---|---|---|
draw(data, options) | никто | Рисует график. |
getSelection() | Массив элементов выбора | Стандартная getSelection() . Выбранные элементы являются элементами столбца и ячейки. Пользователь может одновременно выбрать только один столбец или ячейку. |
setSelection() | никто | Стандартная setSelection() , но поддерживает выбор только одного элемента. Рассматривает каждую запись выбора как выбор столбца или ячейки. Обратите внимание, что столбец метки не может быть выбран. |
События
Имя | Описание | Характеристики |
---|---|---|
onmouseover | Запускается, когда пользователь наводит указатель мыши на полосу и передает индексы строк и столбцов соответствующей ячейки. | строка столбец |
onmouseout | Запускается, когда пользователь уводит мышь от панели и передает индексы строк и столбцов соответствующей ячейки. | строка столбец |
ready | Диаграмма готова к вызову внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вы должны настроить прослушиватель для этого события до вызова метода draw и вызывать их только после того, как событие было запущено. | Никто |
select | Запускается, когда пользователь щелкает полосу или легенду. При выборе столбца выбирается соответствующая ячейка в таблице данных; при выборе легенды выбирается соответствующий столбец в таблице данных. Чтобы узнать, что было выбрано, вызовите getSelection() . | Никто |
Политика данных
Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.