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

Важно! С 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':['imagebarchart']}); </script> <div id="chart_div" style="width: 400px; height: 240px;"></div> 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 type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['imagebarchart']}); </script> <div id="chart_div" style="width: 400px; height: 240px;"></div> 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}); }
<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' - Над диаграммой.
  • 'bottom' - Под графиком.
  • 'none' - Легенда не отображается.
Максимум количество автоматический Максимальное значение для отображения по оси Y.
мин количество автоматический Минимальное значение для отображения по оси Y.
showCategoryLabels логический истинный Если установлено значение false, удаляются метки категорий.
показатьвалуелейблс логический истинный Если установлено значение false, удаляются метки значений.
заглавие нить без заголовка Текст для отображения над диаграммой.
значениеLabelsInterval количество Авто Интервал, с которым отображаются метки оси значений. Например, если min равно 0, max равно 100, а valueLabelsInterval равно 20, на диаграмме будут отображаться метки осей (0, 20, 40, 60, 80 100).
ширина количество Ширина контейнера Ширина диаграммы в пикселях.

Методы

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

События

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

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

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