Gauge.js / Улучшение / Плагины Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.3.7

Каталог: Плагины Bootstrap

Категория: Улучшение

Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, Vue, Laravel, WHMCS

Язык: Английский

Вес файла: 171.8 Kb

Уникальный ID: 5310

Посмотрели: 633 раз

Скачать бесплатно

Помощь: установка & настройка

Скачали бесплатно: 22 раз

Прокомментировали: 0 раз

Рейтинг: 3.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: https://github.com/bernii/gauge.js

Информация: Пользователям

Информация: Правообладателям

Теги: plugin, Bootstrap, датчик, Canvas, gauge.js, датчики

Поделился: BootstrapТема

Добавлено: 2022-05-23 в 08:16

Метка: 1653283009

⇄ ⇅

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://bootstraptema.ru/plugins/2022/gaugejs/gauge.min.js"></script>

<div class="container"><div class="text-center">

<div id="preview-textfield"></div>
<canvas id="demo"></canvas>

</div></div>

<script>
 var opts = {
 angle: -0.25,
 lineWidth: 0.2,
 radiusScale:0.9,
 pointer: {
 length: 0.6,
 strokeWidth: 0.05,
 color: '#000000'
 },
 staticLabels: {
 font: "10px sans-serif",
 labels: [200, 500, 2100, 2800],
 fractionDigits: 0
 },
 staticZones: [
 {strokeStyle: "#F03E3E", min: 0, max: 200},
 {strokeStyle: "#FFDD00", min: 200, max: 500},
 {strokeStyle: "#30B32D", min: 500, max: 2100},
 {strokeStyle: "#FFDD00", min: 2100, max: 2800},
 {strokeStyle: "#F03E3E", min: 2800, max: 3000}
 ],
 limitMax: false,
 limitMin: false,
 highDpiSupport: true
};
var target = document.getElementById('demo'); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
document.getElementById("preview-textfield").className = "preview-textfield";
gauge.setTextField(document.getElementById("preview-textfield"));
gauge.maxValue = 3000; // set max gauge value
gauge.setMinValue(0); // set min value
gauge.set(1250); // set actual value
</script>