Важно! Часть «Диаграммы изображений» в Google Chart Tools официально объявлена устаревшей с 20 апреля 2012 г. Она продолжит работать в соответствии с нашей политикой прекращения поддержки .
Обзор
Круговая диаграмма, отображаемая в виде изображения с помощью API Google Charts .
Пример
<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 | логическое значение | ЛОЖЬ | Заставляет диаграммы генерировать события, инициируемые пользователем, такие как щелчок или наведение указателя мыши. Поддерживается только для определенных типов диаграмм. См. «События» ниже. |
высота | число | Высота контейнера | Высота диаграммы в пикселях. |
is3D | логическое значение | ЛОЖЬ | Если установлено значение true, отображается трехмерная диаграмма. |
этикетки | нить | 'никто' | Какую метку (если она есть) отображать для каждого фрагмента. Выберите одно из следующих значений:
|
легенда | нить | 'верно' | Расположение легенды на схеме. Выберите одно из следующих значений: «сверху», «снизу», «слева», «справа», «нет». |
заголовок | нить | без заголовка | Текст, который будет отображаться над диаграммой. |
ширина | число | Ширина контейнера | Ширина диаграммы в пикселях. |
Методы
Метод | Тип возврата | Описание |
---|---|---|
draw(data, options) | никто | Рисует диаграмму. |
События
Вы можете зарегистрироваться, чтобы услышать события, описанные на странице «Общая диаграмма изображений» .