Визуализация: спарклайн (изображение)

Важно! Часть «Диаграммы изображений» в Google Chart Tools официально объявлена ​​устаревшей с 20 апреля 2012 г. Она продолжит работать в соответствии с нашей политикой прекращения поддержки .

  1. Обзор
  2. Пример
  3. Загрузка
  4. Формат данных
  5. Параметры конфигурации
  6. Методы
  7. События
  8. Политика данных

Обзор

Одна или несколько спарклайнов, отображаемых с помощью изображений с помощью API Google Charts . Изображения содержатся в таблице HTML.

Пример 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagesparkline"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
         ['Revenue', 'Licenses'],
         [435, 132],
         [438, 131],
         [512, 137],
         [460, 142],
         [491, 140],
         [487, 139],
         [552, 147],
         [511, 146],
         [505, 151],
         [509, 149]
        ]);

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

        chart.draw(data, {width: 120, height: 40, showAxisLines: false,  showValueLabels: false, labelPosition: 'left'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 120px; height: 40px;"></div>
  </body>
</html>

Загрузка

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

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

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

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

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

Любое количество столбцов. Все столбцы должны быть числами. Каждый столбец отображается в виде одной спарклайна.

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

Имя Тип По умолчанию Описание
цвет нить Указывает цвет, который будет использоваться для всех диаграмм. Строка в формате #rrggbb. Например: «#00cc00». Используется только в том случае, если опция colors не указана.
цвета Массив строк Цвета по умолчанию Цвета, используемые для столбцов данных. Массив строк, каждый элемент которого представляет собой строку в формате #rrggbb. Например: «#00cc00». Цвет i используется для столбца данных i. Если количество цветов меньше количества столбцов, выбор цвета будет повторяться.
наполнять логическое значение ЛОЖЬ Если это правда, область под линией будет заполнена цветом.
высота число Высота контейнера Высота изображений в пикселях.
меткаПозиция нить никто Положение меток. Поддерживаемые значения: «нет», «слева», «справа».
Макс Массив чисел Максимальное значение данных каждой спарклайна Максимальное значение диапазона значений данных каждой спарклайна. Индекс в массиве должен соответствовать индексу столбца в DataTable. Если все значения равны нулю, это будет максимальное значение в серии.
мин Массив чисел Минимальное значение данных каждой спарклайна Наименьшее значение диапазона значений данных каждой спарклайна. Индекс в массиве должен соответствовать индексу столбца в DataTable. Если все значения равны нулю, это будет минимальное значение в серии.
showAxisLines логическое значение истинный Если это правда, отображаются линии оси. Если значение false, это не так, и значением по умолчанию для showValueLabels является значение false.
showValueLabels логическое значение true, за исключением случаев, когда showAxisLines имеет значение false. Если это правда, отображаются метки оси значений.
заголовок Массив строк Заголовки не отображаются Заголовки для каждой спарклайна.
ширина число Ширина контейнера Ширина диаграмм в пикселях.
макет нить 'в' Вертикальная или горизонтальная компоновка: «v» — вертикально, «h» — горизонтально.

Методы

Метод Тип возврата Описание
draw(data, options) никто Рисует диаграмму.
getSelection() Массив элементов выбора Возвращает индексы выбранных диаграмм в виде массива объектов. У каждого объекта есть свойство столбца, содержащее номер столбца выбранной спарклайна. Может возвращать более одного выбранного столбца.
setSelection(selection) никто Выбирает указанные спарклайны и отменяет выбор всех неуказанных спарклайнов. выделение — это массив объектов, каждый из которых имеет числовое свойство column , которое является индексом выбранной спарклайна. см. setSelection() для получения дополнительной информации.

События

Имя Описание Характеристики
выбирать Стандартное событие выбора. Никто

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

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