Круговая диаграмма

module_charts_pie.html

<div class="module_charts_pie" data-percent="{base:if-else($percent, $percent, 0)}">
    <div class="pie_charts_progress">
        <div class="pie_charts_fill" />
    </div>
    <div class="pie_charts_wrapper" />
</div>

module_charts_pie.js

/**
 * Модуль круговой диаграммы
 * @type Object
 * @author Kechaykin_I
 * @date 13.01.2015
 */
Utk.module_charts_pie = {
    /**
     * Пересчитать диаграмму
     * @param {HTMLElement} elem Элемент диаграммы
     * * @param {Integer} percent Значение в процентах, по умолчанию атрибут "data-percent"
     * @returns {Utk.module_charts_pie.calcUnit.percent} Текущее значение процентов
     */
    calcUnit: function(elem, _percent){
        var percent = _percent > 0 ? _percent : parseInt(elem.getAttribute('data-percent')),
            deg = 360*percent/100,
            fill = elem.querySelector('.pie_charts_fill');
        if (percent > 50) {
            elem.classList.add('gt-50');
        }else{
            elem.classList.remove('gt-50');
        }

        //Единственное применение jQuery
        $(fill).css('transform','rotate('+ deg +'deg)');
        return percent;
    },

    /**
     * Инициализация диаграммы
     * @param _pie HTMLElement
     */
    init: function (_pie) {
        var pie = _pie ? [_pie] : document.querySelectorAll('.module_charts_pie');
        [].forEach.call(pie, function(elem){
            this.calcUnit(elem);
        }.bind(this));
    },

    /**
     * @description Изменить показание диаграммы с анимацией
     * @param {HTMLElement} pie Контейнер с диаграммой
     * @returns {Boolean} Пустой результат
     */
    show: function (pie){
        var self = this,
            percent = parseInt(pie.getAttribute('data-percent')) || 0,
            from = 0, // Начальная координата X
            to = percent, // Конечная координата X
            duration = 1000, // Длительность - 1 секунда
            start = new Date().getTime(); // Время старта

        pie.setAttribute('data-percent', '0');

        setTimeout(function() {
            var now = (new Date().getTime()) - start, // Текущее время
                progress = now / duration, // Прогресс анимации
                result = (to - from) * delta(progress) + from,
                percent = Math.round(result) > 100 ? 100 : Math.round(result);
            self.calcUnit(pie, percent);
            // Если анимация не закончилась, продолжаем
            if (progress < 1){
                setTimeout(arguments.callee, 10);
            }
        }, 10);

        function delta(progress) {
            return Math.pow(progress, 2);
        }

        return false;
    }
};

module_charts_pie.less

/**
* Круговая диаграма
* Если нужно изменить цвет внутренности диаграмы (не границ),
* то достаточно поменять цвет у фона .pie_charts
*/

#module_charts_pie()
{
  @size: 100px;
  @color_positive: #33935b;
  @color_negative: #ff5e4d;

  /* Mixin */
  .module_charts_pie
  {
    &,
    &:before,
    .pie_charts_progress,
    .pie_charts_fill
    {
      position: absolute;
      border-radius: 50%;
      top: 0; left: 0;
      width: @size;
      height: @size;
    }
  }

  .module_charts_pie
  {
    position: relative;
    background-color: #fff;

    &:before
    {
      content: '';
      background-color: @color_negative;
    }

    /* Status */
    .pie_charts_progress { clip: rect(0, @size, @size, @size/2); }
    .pie_charts_fill
    {
      clip: rect(0, @size/2, @size, 0);
      background-color: @color_positive;
      -webkit-transform: rotate(60deg);
    }

    &.gt-50
    {
      &:before{ background-color: @color_positive; }
      .pie_charts_progress { clip: rect(0, @size/2, @size, 0); }
      .pie_charts_fill
      {
        clip: rect(0, @size, @size, @size/2);
        background-color: @color_negative;
      }
    }
  }

  /* Wrapper */
  .module_charts_pie .pie_charts_wrapper
  {
    position: absolute;
    background-color: inherit;
    top: 10px; bottom: 10px;
    left: 10px; right: 10px;
    border-radius: 50%;
  }
}

#module_charts_pie();