Визуализация: гистограмма (изображение)

Важно! Часть «Диаграммы изображений» в 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:["imagebarchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var chart = new google.visualization.ImageBarChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Загрузка

Имя пакета google.charts.load — "imagebarchart"

  google.charts.load("current", {packages: [[]"imagebarchart"]});

Имя класса визуализации — google.visualization.ImageBarChart

  var visualization = new google.visualization.ImageBarChart(container);

Формат данных

Первый столбец должен быть строкой и содержать метку категории. Следовать может любое количество столбцов, все они должны быть числовыми. Каждый столбец отображается в виде набора полос. Если таблица данных содержит более одного числового столбца, значения в строке отображаются в виде столбцов, расположенных друг над другом.

Параметры конфигурации

Имя Тип По умолчанию Описание
фоновый цвет нить '#FFFFFF' (белый) Цвет фона диаграммы в цветовом формате Chart API .
цвета Массив<строка> Авто Используйте это, чтобы назначить определенные цвета каждому ряду данных. Цвета указываются в цветовом формате Chart API . Цвет i используется для столбца данных i, переходя к началу, если столбцов данных больше, чем цветов. Если вариации одного цвета приемлемы для всех серий, используйте вместо этого вариант color .
EnableEvents логическое значение ЛОЖЬ Заставляет диаграммы генерировать события, инициируемые пользователем, такие как щелчок или наведение указателя мыши. Поддерживается только для определенных типов диаграмм. См. «События» ниже.
высота число Высота контейнера Высота диаграммы в пикселях.
isStacked логическое значение истинный Определяет, будут ли несколько столбцов данных отображаться в виде столбцов (а не сгруппированных).
isVertical логическое значение ЛОЖЬ Определяет, будут ли полосы вертикальными.
легенда нить 'верно' Расположение и тип легенды. Может быть одним из следующих:
  • 'right' - Справа от диаграммы.
  • «left» — слева от диаграммы.
  • 'top' - Над графиком.
  • «дно» — под графиком.
  • 'none' — легенда не отображается.
Макс число автоматический Максимальное значение, отображаемое по оси Y.
мин число автоматический Минимальное значение, отображаемое по оси Y.
showCategoryLabels логическое значение истинный Если установлено значение false, метки категорий удаляются.
showValueLabels логическое значение истинный Если установлено значение false, удаляются метки значений.
заголовок нить без заголовка Текст для отображения над диаграммой.
значениеLabelsInterval число Авто Интервал отображения меток оси значений. Например, если min равно 0, max — 100, а valueLabelsInterval — 20, на диаграмме метки осей будут отображаться в точках (0, 20, 40, 60, 80 100).
ширина число Ширина контейнера Ширина диаграммы в пикселях.

Методы

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

События

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

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

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