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

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

Обзор

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

Пример

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 400px; height: 120px;"></div> 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 type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 400px; height: 120px;"></div> 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); }
<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
анимация.ослабление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Методы

Метод
draw(data, options)

Рисует график.

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

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

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

События

Нет инициированных событий.

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

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