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