Форма входа

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

    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

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

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

    Дата добавления: 31.01.2021 - 10:00
    Добавил: Buger
    Количество просмотров: 844
    Количество комментариев: 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({  
      // здесь параметры опций
    })
    Добавлять комментарии могут только зарегистрированные пользователи.


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