Визуализация: круговая диаграмма (изображение)

Важно! С 20 апреля 2012 года функция графических диаграмм в Google Charts Tools официально объявлена ​​устаревшей . Она продолжит работать в соответствии с нашей политикой прекращения поддержки .

  1. Обзор
  2. Пример
  3. Загрузка
  4. Формат данных
  5. Параметры конфигурации
  6. Методы
  7. События
  8. Политика данных

Обзор

Круговая диаграмма, отображаемая в виде изображения с помощью Google Charts API .

Пример

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['imagepiechart']}); </script> <div id="chart_div" style="width: 400px; height: 240px;"></div> 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 type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['imagepiechart']}); </script> <div id="chart_div" style="width: 400px; height: 240px;"></div> 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'}); }
<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, отображает трехмерную диаграмму.
этикетки нить 'никто'

Какую метку, если таковая имеется, отображать для каждого среза. Выберите одно из следующих значений:

  • 'none' - Без меток.
  • 'value' — использовать значение среза в качестве метки.
  • 'name' — используйте имя слайса (имя столбца).
легенда нить 'Правильно' Расположение легенды на графике. Выберите одно из следующих значений: «сверху», «снизу», «слева», «справа», «нет».
заглавие нить без заголовка Текст для отображения над диаграммой.
ширина количество Ширина контейнера Ширина диаграммы в пикселях.

Методы

Метод Тип возврата Описание
draw(data, options) никто Рисует график.

События

Вы можете зарегистрироваться, чтобы услышать события, описанные на странице Generic Image Chart .

Политика данных

См. политику ведения журналов Chart API .