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

Важно! Часть «Диаграммы изображений» в Google Chart Tools официально объявлена ​​устаревшей с 20 апреля 2012 г. Она продолжит работать в соответствии с нашей политикой прекращения поддержки .

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

Обзор

Круговая диаграмма, отображаемая в виде изображения с помощью 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, отображается трехмерная диаграмма.
этикетки нить 'никто'

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

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

Методы

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

События

Вы можете зарегистрироваться, чтобы услышать события, описанные на странице «Общая диаграмма изображений» .

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

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