Важно! С 20 апреля 2012 года функция графических диаграмм в Google Charts Tools официально объявлена устаревшей . Она продолжит работать в соответствии с нашей политикой прекращения поддержки .
Обзор
Круговая диаграмма, отображаемая в виде изображения с помощью Google Charts API .
Пример
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["imagepiechart"]}); google.charts.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.ImagePieChart(document.getElementById('chart_div')); chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'}); } </script> </head> <body> <div id="chart_div" style="width: 400px; height: 240px;"></div> </body> </html>
Загрузка
Имя пакета google.charts.load
— "imagepiechart"
:
google.charts.load('current', {packages: ['imagepiechart']});
Имя класса визуализации — google.visualization.ImagePieChart
var visualization = new google.visualization.ImagePieChart(container);
Формат данных
Две колонки. Первый столбец должен быть строкой и содержать метку среза. Второй столбец должен быть числом и содержать значение среза.
Параметры конфигурации
Вы можете указать следующие параметры как часть объекта параметров, передаваемого в метод визуализации draw()
.
Имя | Тип | По умолчанию | Описание |
---|---|---|---|
фоновый цвет | нить | '#FFFFFF' (белый) | Цвет фона диаграммы в цветовом формате Chart API . |
цвет | нить | Авто | Указывает базовый цвет для использования во всех сериях; каждая серия будет градацией указанного цвета. Цвета задаются в цветовом формате Chart API . Игнорируется, если указаны colors . |
цвета | Массив<строка> | Авто | Используйте это, чтобы назначить определенные цвета для каждой серии данных. Цвета задаются в цветовом формате Chart API . Цвет i используется для столбца данных i, переходя к началу, если столбцов данных больше, чем цветов. Если вариации одного цвета допустимы для всех серий, вместо этого используйте вариант color . |
enableEvents | логический | ЛОЖЬ | Заставляет диаграммы генерировать инициированные пользователем события, такие как щелчок или наведение указателя мыши. Поддерживается только для определенных типов диаграмм. См. События ниже. |
высота | количество | Высота контейнера | Высота диаграммы в пикселях. |
3D | логический | ЛОЖЬ | Если установлено значение true, отображает трехмерную диаграмму. |
этикетки | нить | 'никто' | Какую метку, если таковая имеется, отображать для каждого среза. Выберите одно из следующих значений:
|
легенда | нить | 'Правильно' | Расположение легенды на графике. Выберите одно из следующих значений: «сверху», «снизу», «слева», «справа», «нет». |
заглавие | нить | без заголовка | Текст для отображения над диаграммой. |
ширина | количество | Ширина контейнера | Ширина диаграммы в пикселях. |
Методы
Метод | Тип возврата | Описание |
---|---|---|
draw(data, options) | никто | Рисует график. |
События
Вы можете зарегистрироваться, чтобы услышать события, описанные на странице Generic Image Chart .