Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Donutty - библиотека анимированных диаграмм JavaScript / jQuery

Дата добавления: 31.01.2021 - 10:00
Добавил: Buger
Количество просмотров: 38
Количество комментариев: 0
Размер файла: 172.3 Kb
Рейтинг материала: 0.0 / 0
Donutty - библиотека анимированных диаграмм JavaScript / jQuery
БЕСПЛАТНО
рейтинг 0.0
/
голосов 0
Donutty - это библиотека диаграмм JavaScript / jQuery, которая позволяет создавать плавно анимированные, полностью масштабируемые кольцевые / круговые / кольцевые диаграммы или круговые / радиальные индикаторы выполнения с использованием анимации SVG и CSS3.

Также поставляется с ванильной версией JavaScript, которая позволяет вам реализовать библиотеку диаграмм без каких-либо третьих зависимостей.

Демо доступно в папке: /test/

Как использовать (версия jQuery):


1. Загрузите и подключите в документ последнюю версию jQuery и файл JavaScript 'donutty-jquery.js'.
Код
<script src="jquery.slim.min.js"></script>
<script src="dist/donutty-jquery.js"></script>

2. Чтобы создать диаграмму по умолчанию, просто добавьте атрибут data-donutty к элементу заполнителя и готово.
Код
<div data-donutty></div>

3. Вызовите функцию для элемента-заполнителя:
Код
const myChart = $("#example").donutty({
  // здесь опции
});

4. Настройте диаграмму с помощью атрибутов data-OPTION или передав параметры методу donutty () следующим образом:
Код
<div data-donutty  
  data-radius=20  
  data-thickness=40  
  data-padding=0  
  data-round=false  
  data-color="lightcoral"  
  data-value=80
  ...>
</div>

Код
// или
const myChart = $("#example").donutty({
  min: -100,  
  max: 100,  
  value: 50
});

5. Все параметры конфигурации по умолчанию.
Код
const myChart = $("#example").donutty({

  // мин./макс. значения
  min: 0,
  max: 100,

  // текущее значение
  value: 50,

  // закругленные края или нет
  round: true,

  // полный круг или нет
  circle: true,

  // отступ в пикселях
  padding: 4,

  // радиус в пикселях
  radius: 50,

  // толщина в пикселях
  thickness: 10,

  // фоновый цвет
  bg: "rgba(70, 130, 180, 0.15)",

  // цвет полосы
  color: "mediumslateblue",

  // эффект перехода
  transition: "all 1.2s cubic-bezier(0.57, 0.13, 0.18, 0.98)"
   
});

6. Настройте текст, отображаемый на диаграмме, с помощью функции text.
Код
const myChart = $("#example").donutty({
  text: function( state ) {
  return ( state.value / ( state.max - state.min ) * 100 ) + "%";
  }
});

7. Обновите параметры / значения / статистику диаграммы.
Код
// min, max, value
myChart.set( "value", 60 )

// min, max, value, bg, color, etc
myChart.setState({  
  // здесь параметры опций
})
Добавлять комментарии могут только зарегистрированные пользователи.


Поделись с друзьями: