Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Donutty - библиотека анимированных диаграмм JavaScript / jQuery
Дата добавления: 31.01.2021 - 10:00
Категория: Хаки / Дополнения
Добавил: Buger
Количество просмотров: 38
Количество комментариев: 0
Размер файла: 172.3 Kb
Рейтинг материала: 0.0 / 0
БЕСПЛАТНО
рейтинг
0.0
/
голосов
0
Donutty - это библиотека диаграмм JavaScript / jQuery, которая позволяет создавать плавно анимированные, полностью масштабируемые кольцевые / круговые / кольцевые диаграммы или круговые / радиальные индикаторы выполнения с использованием анимации SVG и CSS3.
Также поставляется с ванильной версией JavaScript, которая позволяет вам реализовать библиотеку диаграмм без каких-либо третьих зависимостей.
Демо доступно в папке: /test/
1. Загрузите и подключите в документ последнюю версию jQuery и файл JavaScript 'donutty-jquery.js'.
2. Чтобы создать диаграмму по умолчанию, просто добавьте атрибут data-donutty к элементу заполнителя и готово.
3. Вызовите функцию для элемента-заполнителя:
4. Настройте диаграмму с помощью атрибутов data-OPTION или передав параметры методу donutty () следующим образом:
5. Все параметры конфигурации по умолчанию.
6. Настройте текст, отображаемый на диаграмме, с помощью функции text.
7. Обновите параметры / значения / статистику диаграммы.
Также поставляется с ванильной версией JavaScript, которая позволяет вам реализовать библиотеку диаграмм без каких-либо третьих зависимостей.
Как использовать (версия jQuery):
1. Загрузите и подключите в документ последнюю версию jQuery и файл JavaScript 'donutty-jquery.js'.
Код
<script src="jquery.slim.min.js"></script>
<script src="dist/donutty-jquery.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>
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
});
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)"
});
// мин./макс. значения
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 ) + "%";
}
});
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({
// здесь параметры опций
})
myChart.set( "value", 60 )
// min, max, value, bg, color, etc
myChart.setState({
// здесь параметры опций
})
Поделись с друзьями:
