Обзор
Датчик со циферблатом, отображаемый в браузере с использованием 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);
Формат данных
Каждое числовое значение отображается в виде шкалы. Поддерживаются два альтернативных формата данных:
- Две колонки. Первый столбец должен представлять собой строку и содержать метку датчика. Второй столбец должен быть числом и содержать значение датчика.
- Любое количество числовых столбцов. Метка каждого датчика является меткой столбца.
Параметры конфигурации
| Имя | |
|---|---|
| анимация.длительность | Продолжительность анимации в миллисекундах. Подробности смотрите в документации по анимации . Тип: номер По умолчанию: 400 |
| анимация.easing | Функция замедления, примененная к анимации. Доступны следующие варианты:
Тип: строка По умолчанию: «линейный» |
| сила IFrame | Рисует диаграмму внутри встроенного фрейма. (Обратите внимание, что в IE8 этот параметр игнорируется; все диаграммы IE8 рисуются в i-кадрах.) Тип: логический По умолчанию: ложь |
| зеленого цвета | Цвет, используемый для зеленого раздела, в цветовой нотации HTML. Тип: строка По умолчанию: '#109618' |
| зеленыйОт | Наименьшее значение для диапазона, отмеченного зеленым цветом. Тип: номер По умолчанию: нет |
| зеленыйTo | Самое высокое значение для диапазона, отмеченного зеленым цветом. Тип: номер По умолчанию: нет |
| высота | Высота диаграммы в пикселях. Тип: номер По умолчанию: ширина контейнера. |
| майорТикс | Метки для основных делений. Количество меток определяет количество основных делений во всех датчиках. По умолчанию — пять основных делений с метками минимального и максимального значения шкалы. Тип: Массив строк. По умолчанию: нет |
| Макс | Максимальное значение калибра. Тип: номер По умолчанию: 100 |
| мин | Минимальное значение датчика. Тип: номер По умолчанию: 0 |
| минорТикс | Количество второстепенных разделов в каждом основном разделе. Тип: номер По умолчанию: 2 |
| красный цвет | Цвет, используемый для красного раздела, в цветовой нотации HTML. Тип: строка По умолчанию: '#DC3912' |
| красныйОт | Наименьшее значение для диапазона, отмеченного красным цветом. Тип: номер По умолчанию: нет |
| красныйTo | Самое высокое значение для диапазона, отмеченного красным цветом. Тип: номер По умолчанию: нет |
| ширина | Ширина диаграммы в пикселях. Тип: номер По умолчанию: ширина контейнера. |
| желтого цвета | Цвет желтого раздела в цветовой нотации HTML. Тип: строка По умолчанию: '#FF9900' |
| желтыйОт | Наименьшее значение для диапазона, отмеченного желтым цветом. Тип: номер По умолчанию: нет |
| желтыйК | Самое высокое значение для диапазона, отмеченного желтым цветом. Тип: номер По умолчанию: нет |
Методы
| Метод | |
|---|---|
draw(data, options) | Рисует диаграмму. Тип возврата: нет |
clearChart() | Очищает диаграмму и освобождает все выделенные ей ресурсы. Тип возврата: нет |
События
Никаких триггерных событий.
Политика данных
Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.