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

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

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

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

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

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

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

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

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

Методы

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

События

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

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

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