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

Важно! Часть диаграмм 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:["imageareachart"]});
      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.ImageAreaChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Загрузка

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

  google.charts.load('current', {packages: ['imageareachart']});

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

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

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

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

Данные обрабатываются по столбцам, начиная с нулевого столбца и по возрастанию. Сначала вам следует написать самые высокие строки, а затем нижние, потому что, если вы сначала нарисуете нижнюю линию, более высокая линия закрасит и скроет все нижние линии. Поэтому постарайтесь сделать так, чтобы столбец 1 имел более высокие баллы, чем столбец 2, столбец 2 выше, чем столбец 3, и так далее. Если в правом столбце на одну или две точки выше, чем в левом, это может частично затенять нижнюю строку, но она все равно должна быть видна.

Все данные должны быть числового типа, за исключением первого, который может быть числовым или строковым. Если первый столбец имеет строковый тип, записи первого столбца будут отображаться в виде меток на X; если первый столбец представляет собой число, метки оси X отображаться не будут. Все столбцы (кроме первого) должны быть числами. Ограничений на количество столбцов нет.

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

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

Методы

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

События

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

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

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