Устаревший
Эта визуализация была заменена новой версией ; пожалуйста, используйте это вместо этого. Чтобы упростить миграцию, обратитесь к странице примечаний к выпуску .
Обзор
Диаграмма с областями, отображаемая в браузере с использованием 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:["areachart"]});
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.AreaChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
Загрузка
Имя пакета google.load — "areachart".
google.load("visualization", "1", {packages: ["areachart"]});
Имя класса визуализации — google.visualization.AreaChart
var visualization = new google.visualization.AreaChart(container);
Формат данных
Первый столбец должен быть строкой и содержать метку категории. За ним может следовать любое количество столбцов, все они должны быть числовыми. Каждый столбец отображается отдельной строкой.
Параметры конфигурации
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| осьЦвет | строка или объект | цвет по умолчанию | Цвет оси. Возможные значения аналогичны параметрам конфигурации backgroundColor . |
| осьфонЦвет | строка или объект | цвет по умолчанию | Граница вокруг фона оси. Возможные значения аналогичны параметрам конфигурации backgroundColor . |
| осьFontSize | количество | автоматический | Размер шрифта текста оси диаграммы в пикселях. |
| фоновый цвет | строка или объект | цвет по умолчанию | Цвет фона для основной области диаграммы. Может быть один из следующих вариантов:
|
| цвет границы | строка или объект | цвет по умолчанию | Граница вокруг элементов диаграммы. Возможные значения аналогичны параметрам конфигурации backgroundColor . |
| цвета | Массив строк | Цвета по умолчанию | Цвета, используемые для элементов диаграммы. Массив строк. Каждый элемент представляет собой строку цвета, поддерживаемого HTML, например, «красный» или «#00cc00». |
| включитьПодсказка | логический | истинный | Если установлено значение true, всплывающие подсказки отображаются, когда пользователь щелкает точку данных. |
| фокусГраницаЦвет | строка или объект | цвет по умолчанию | Граница вокруг элементов диаграммы, находящихся в фокусе (наведенных мышью). Возможные значения аналогичны параметрам конфигурации backgroundColor . |
| высота | количество | Высота контейнера | Высота диаграммы в пикселях. |
| isStacked | логический | ЛОЖЬ | Если установлено значение true, значения строки складываются (накапливаются). |
| легенда | нить | 'Правильно' | Положение и тип легенды. Может быть одним из следующих:
|
| легендаФонЦвет | строка или объект | цвет по умолчанию | Цвет фона области легенды диаграммы. Возможные значения аналогичны параметрам конфигурации backgroundColor . |
| легендаШрифтРазмер | количество | автоматический | Размер шрифта легенды в пикселях. |
| легендатекстцвет | строка или объект | цвет по умолчанию | Цвет текста легенды. Возможные значения аналогичны параметрам конфигурации backgroundColor . |
| размер линии | количество | 2 | Ширина линии в пикселях. Используйте ноль, чтобы скрыть все линии и показать только точки. |
| logScale | логический | ЛОЖЬ | Если это правда, главная ось должна масштабироваться логарифмически. |
| Максимум | количество | автоматический | Указывает самую высокую линию сетки по оси Y. Фактическая линия сетки будет большим из двух значений: максимальное значение параметра или наибольшее значение данных, округленное до следующей более высокой отметки сетки. |
| мин | количество | автоматический | Задает самую нижнюю линию сетки по оси Y. Фактическая линия сетки будет наименьшей из двух значений: минимальное значение параметра или наименьшее значение данных, округленное в меньшую сторону до следующей более низкой отметки сетки. |
| размер точки | количество | 3 | Размер отображаемых точек в пикселях. Используйте ноль, чтобы скрыть все точки. |
| обратная ось | логический | ЛОЖЬ | Если установлено значение true, категории будут отображаться справа налево. По умолчанию рисование слева направо. |
| показатьКатегории | логический | истинный | Если true, будут отображаться метки категорий. Если ложь, не будет. |
| заглавие | нить | без заголовка | Текст для отображения над диаграммой. |
| названиеX | нить | без заголовка | Текст для отображения под горизонтальной осью. |
| названиеY | нить | без заголовка | Текст для отображения по вертикальной оси. |
| названиеЦвет | строка или объект | цвет по умолчанию | Цвет заголовка диаграммы. Возможные значения аналогичны параметрам конфигурации backgroundColor . |
| заголовокразмер шрифта | количество | автоматический | Размер шрифта заголовка диаграммы в пикселях. |
| всплывающая подсказкаРазмер шрифта | количество | 11 | Размер шрифта текста всплывающей подсказки. Это может быть уменьшено, если всплывающая подсказка слишком мала для размещения текста в указанном шрифте. |
| всплывающая подсказкаВысота | количество | 60 | Высота всплывающей подсказки в пикселях. Высота всплывающей подсказки фиксирована; он никогда не будет увеличиваться или уменьшаться, чтобы соответствовать длине или размеру шрифта текста. Но все, что превышает 1/3 высоты диаграммы, будет обрезано. |
| всплывающая подсказкаШирина | количество | 120 | Ширина всплывающей подсказки в пикселях. Ширина всплывающей подсказки фиксирована; он никогда не будет увеличиваться или уменьшаться, чтобы соответствовать длине или размеру шрифта текста. Но все, что больше ширины диаграммы, будет обрезано. |
| ширина | количество | Ширина контейнера | Ширина диаграммы в пикселях. |
Методы
| Метод | Тип возврата | Описание |
|---|---|---|
draw(data, options) | никто | Рисует график. |
getSelection() | Массив элементов выбора | Стандартная getSelection() . Выбранные элементы являются элементами столбца и ячейки. Пользователь может одновременно выбрать только один столбец или ячейку. |
setSelection() | никто | Стандартная setSelection() , но поддерживает выбор только одного элемента. Рассматривает каждую запись выбора как выбор столбца или ячейки. Обратите внимание, что столбец метки не может быть выбран. |
События
| Имя | Описание | Характеристики |
|---|---|---|
onmouseover | Запускается, когда пользователь наводит указатель мыши на точку и передает индексы строк и столбцов соответствующей ячейки. | строка столбец |
onmouseout | Запускается, когда пользователь уводит мышь от точки и передает индексы строк и столбцов соответствующей ячейки. | строка столбец |
ready | Диаграмма готова к вызову внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вы должны настроить прослушиватель для этого события до вызова метода draw и вызывать их только после того, как событие было запущено. | Никто |
select | Запускается, когда пользователь щелкает точку или легенду. При выборе точки выбирается соответствующая ячейка в таблице данных; при выборе легенды выбирается соответствующий столбец в таблице данных. Чтобы узнать, что было выбрано, вызовите getSelection() . | Никто |
Политика данных
Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.