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

Важно! С 20 апреля 2012 года функция графических диаграмм в Google Charts Tools официально объявлена ​​устаревшей . Она продолжит работать в соответствии с нашей политикой прекращения поддержки .

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

Обзор

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

Пример

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['imagesparkline']}); </script> <div id="chart_div" style="width: 120px; height: 40px;"></div> 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 type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['imagesparkline']}); </script> <div id="chart_div" style="width: 120px; height: 40px;"></div> 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'}); }
<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. Если количество цветов меньше, чем количество столбцов, выбор цвета будет повторяться.
наполнять логический ЛОЖЬ Если true, область под линией будет заполнена цветом.
высота количество Высота контейнера Высота изображений в пикселях.
меткаПозиция нить никто Положение меток. Поддерживаемые значения: «нет», «левый», «правый».
Максимум Массив чисел Максимальное значение данных каждого спарклайна Максимальное значение для диапазона значений данных каждой спарклайна. Индекс в массиве должен соответствовать индексу столбца в DataTable. Если все значения равны нулю, это будет максимальное значение в серии.
мин Массив чисел Минимальное значение данных каждого спарклайна Наименьшее значение для диапазона значений данных каждой спарклайна. Индекс в массиве должен соответствовать индексу столбца в DataTable. Если все значения равны нулю, это будет минимальное значение в серии.
показатьAxisLines логический истинный Если true, отображаются осевые линии. Если false, то это не так, и значение по умолчанию для showValueLabels равно false.
показатьвалуелейблс логический true, за исключением случаев, когда showAxisLines имеет значение false. Если true, отображаются метки оси значений.
заглавие Массив строк Заголовки не отображаются Заголовки, используемые для каждого спарклайна.
ширина количество Ширина контейнера Ширина диаграмм в пикселях.
макет нить 'в' Вертикальное или горизонтальное расположение: 'v' для вертикального, 'h' для горизонтального.

Методы

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

События

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

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

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