Визуализация: Датчик

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

Обзор

Датчик со циферблатом, отображаемый в браузере с использованием SVG или VML.

Пример 

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

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

        chart.draw(data, options);

        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 13000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

На данный момент нет возможности указать название измерительной диаграммы, как это можно сделать в других диаграммах Google. В приведенном выше примере для отображения заголовка используется простой HTML.

Кроме того, опция animation.startup , доступная для многих других диаграмм Google, недоступна для диаграммы датчиков. Если вам нужна анимация запуска, сначала нарисуйте диаграмму со значениями, установленными на ноль, а затем нарисуйте еще раз со значением, до которого вы хотите анимировать.

Загрузка

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

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

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

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

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

Каждое числовое значение отображается в виде шкалы. Поддерживаются два альтернативных формата данных:

  1. Две колонки. Первый столбец должен представлять собой строку и содержать метку датчика. Второй столбец должен быть числом и содержать значение датчика.
  2. Любое количество числовых столбцов. Метка каждого датчика является меткой столбца.

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

Имя
анимация.длительность

Продолжительность анимации в миллисекундах. Подробности смотрите в документации по анимации .

Тип: номер
По умолчанию: 400
анимация.easing

Функция замедления, примененная к анимации. Доступны следующие варианты:

  • «линейный» — постоянная скорость.
  • 'in' - Легкость - Начинайте медленно и ускоряйтесь.
  • 'out' - Успокойтесь - Начинайте быстро и замедляйтесь.
  • «inAndOut» — легкость входа и выхода — начинайте медленно, ускоряйтесь, затем замедляйтесь.
Тип: строка
По умолчанию: «линейный»
сила IFrame

Рисует диаграмму внутри встроенного фрейма. (Обратите внимание, что в IE8 этот параметр игнорируется; все диаграммы IE8 рисуются в i-кадрах.)

Тип: логический
По умолчанию: ложь
зеленого цвета

Цвет, используемый для зеленого раздела, в цветовой нотации HTML.

Тип: строка
По умолчанию: '#109618'
зеленыйОт

Наименьшее значение для диапазона, отмеченного зеленым цветом.

Тип: номер
По умолчанию: нет
зеленыйTo

Самое высокое значение для диапазона, отмеченного зеленым цветом.

Тип: номер
По умолчанию: нет
высота

Высота диаграммы в пикселях.

Тип: номер
По умолчанию: ширина контейнера.
майорТикс

Метки для основных делений. Количество меток определяет количество основных делений во всех датчиках. По умолчанию — пять основных делений с метками минимального и максимального значения шкалы.

Тип: Массив строк.
По умолчанию: нет
Макс

Максимальное значение калибра.

Тип: номер
По умолчанию: 100
мин

Минимальное значение датчика.

Тип: номер
По умолчанию: 0
минорТикс

Количество второстепенных разделов в каждом основном разделе.

Тип: номер
По умолчанию: 2
красный цвет

Цвет, используемый для красного раздела, в цветовой нотации HTML.

Тип: строка
По умолчанию: '#DC3912'
красныйОт

Наименьшее значение для диапазона, отмеченного красным цветом.

Тип: номер
По умолчанию: нет
красныйTo

Самое высокое значение для диапазона, отмеченного красным цветом.

Тип: номер
По умолчанию: нет
ширина

Ширина диаграммы в пикселях.

Тип: номер
По умолчанию: ширина контейнера.
желтого цвета

Цвет желтого раздела в цветовой нотации HTML.

Тип: строка
По умолчанию: '#FF9900'
желтыйОт

Наименьшее значение для диапазона, отмеченного желтым цветом.

Тип: номер
По умолчанию: нет
желтыйК

Самое высокое значение для диапазона, отмеченного желтым цветом.

Тип: номер
По умолчанию: нет

Методы

Метод
draw(data, options)

Рисует диаграмму.

Тип возврата: нет
clearChart()

Очищает диаграмму и освобождает все выделенные ей ресурсы.

Тип возврата: нет

События

Никаких триггерных событий.

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

Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.