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

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

Методы

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

События

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

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

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