Устарело
Эта визуализация заменена новой версией ; пожалуйста, используйте это вместо этого. Для упрощения миграции обратитесь к странице примечаний к выпуску .
Обзор
Круговая диаграмма, отображаемая в браузере с использованием 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:["piechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
Загрузка
Имя пакета google.load — "piechart"
google.load("visualization", "1", {packages: ["piechart"]});
Имя класса визуализации — google.visualization.PieChart
var visualization = new google.visualization.PieChart(container);
Формат данных
Две колонки. Первый столбец должен быть строкой и содержать метку фрагмента. Второй столбец должен быть числом и содержать значение среза.
Параметры конфигурации
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| фоновый цвет | строка или объект | цвет по умолчанию | Цвет фона основной области диаграммы. Один из следующих вариантов:
|
| цвет границы | строка или объект | цвет по умолчанию | Граница вокруг элементов диаграммы. Возможные значения такие же, как для параметра конфигурации backgroundColor . |
| цвета | Массив строк или объектов | Цвета по умолчанию | Массив цветов, где каждый элемент задает цвет одной серии. Для каждой серии необходимо указать один элемент массива.
|
| включить подсказку | логическое значение | истинный | Если установлено значение true, всплывающие подсказки отображаются, когда пользователь щелкает фрагмент. |
| фокусГраницаЦвет | строка или объект | цвет по умолчанию | Граница вокруг элементов диаграммы, находящихся в фокусе (указанных мышью). Возможные значения такие же, как для параметра конфигурации backgroundColor . |
| высота | число | Высота контейнера | Высота диаграммы в пикселях. |
| is3D | логическое значение | ЛОЖЬ | Если установлено значение true, отображается трехмерная диаграмма. |
| легенда | нить | 'верно' | Расположение и тип легенды. Может быть одним из следующих:
|
| легендаФонЦвет | строка или объект | цвет по умолчанию | Цвет фона области легенды диаграммы. Возможные значения такие же, как для параметра конфигурации backgroundColor . |
| LegendFontSize | число | автоматический | Размер шрифта легенды в пикселях. |
| легендаТекстЦвет | строка или объект | цвет по умолчанию | Цвет текста легенды. Возможные значения такие же, как для параметра конфигурации backgroundColor . |
| пирогJoinAngle | число | 0 | Любой фрагмент, меньший этого угла, будет объединен в общий фрагмент с надписью «Другое». |
| пирогМинимальныйУгол | число | 0 | Любой фрагмент, меньший этого угла, не будет отображаться на круговой диаграмме (хотя для него все равно будет введена легенда). Остальные ломтики расширятся и заполнят пирог в фиксированной пропорции. Примечание. Это может исказить видимые значения, особенно если это число велико, поскольку определенное количество удаляется из круговой диаграммы. Чтобы вычислить размеры срезов, сначала углы, меньшие, чем pieJoinAngle, присоединяются к срезу «Другое», а затем рисуются все срезы, большие, чем pieMinimalAngle. |
| заголовок | нить | без заголовка | Текст, который будет отображаться над диаграммой. |
| заголовокЦвет | строка или объект | цвет по умолчанию | Цвет заголовка диаграммы. Возможные значения такие же, как для параметра конфигурации backgroundColor . |
| заголовокFontSize | число | автоматический | Размер шрифта заголовка диаграммы в пикселях. |
| подсказкаFontSize | число | 11 | Размер шрифта текста подсказки. Это можно уменьшить, если всплывающая подсказка слишком мала для размещения текста указанным шрифтом. |
| подсказкаВысота | число | 60 | Высота всплывающей подсказки в пикселях. Высота подсказки фиксирована; он никогда не будет увеличиваться или уменьшаться в соответствии с длиной или размером шрифта текста. Но все, что превышает 1/3 высоты диаграммы, будет обрезано. |
| ширина подсказки | число | 120 | Ширина всплывающей подсказки в пикселях. Ширина подсказки фиксирована; он никогда не будет увеличиваться или уменьшаться в соответствии с длиной или размером шрифта текста. Но все, что превышает ширину диаграммы, будет обрезано. |
| ширина | число | Ширина контейнера | Ширина диаграммы в пикселях. |
Методы
| Метод | Тип возврата | Описание |
|---|---|---|
draw(data, options) | никто | Рисует диаграмму. |
getSelection() | Массив элементов выбора | Стандартная реализация getSelection() . Выбранными элементами являются элементы строк и ячеек. Пользователь может выбрать несколько строк и/или одну ячейку одновременно. |
setSelection() | никто | Стандартная реализация setSelection() , но поддерживает выбор нескольких строк и/или одной ячейки. Рассматривает каждую запись выбора как выбор строки или ячейки. |
События
| Имя | Описание | Характеристики |
|---|---|---|
onmouseover | Вызывается, когда пользователь наводит указатель мыши на фрагмент и передает индексы строк и столбцов соответствующей ячейки. | строка столбец |
onmouseout | Вызывается, когда пользователь уводит указатель мыши от фрагмента и передает индексы строк и столбцов соответствующей ячейки. | строка столбец |
ready | Диаграмма готова для вызовов внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вам следует настроить прослушиватель для этого события перед вызовом метода draw и вызывать их только после того, как событие было запущено. | Никто |
select | Запускается, когда пользователь щелкает фрагмент или легенду. Когда выбран срез, выбирается соответствующая ячейка в таблице данных; при выборе легенды выбирается соответствующий столбец в таблице данных. Чтобы узнать, что было выбрано, вызовите Примечание. Щелчок по фрагменту не приводит к переключению между выделением и отменой выбора ячейки; щелчок по фрагменту всегда выбирает его. С другой стороны, щелчок по записи легенды позволяет переключаться между выделением и отменой выбора строки. | Никто |
Политика данных
Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.