Dodecagon图表

下载代码

html

css

分享到微信朋友圈

html

css

body {
  height: 100%;
  padding: 0;
  display: block;
  margin: 0;
  background-color: #703bf6;
}

.inputs {
  text-align: right;
}
.inputs > div {
  margin: 10px 20px;
}

input {
  color: #333;
  padding: 0 15px;
  height: 40px;
  width: 100px;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  border: none;
}

.flex_container {
  display: flex;
  flex-flow: row wrap;
  height: 100vh;
  font: 20px Helvetica;
  font-weight: 300;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.8);
  justify-content: center;
  align-items: center;
}

.chart {
  width: 90vh;
  height: auto;
  background: none;
  position: relative;
  border: none;
  outline: none;
}
.chart:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.chart svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.chart svg .dodecagon--solid {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  stroke-miterlimit: 10;
}
.chart svg .dodecagon--center {
  fill: none;
  stroke: rgba(51, 51, 51, 0.8);
  stroke-width: 1;
  stroke-miterlimit: 10;
}
.chart svg .dodecagon--dotted {
  fill: none;
  stroke: #fff;
  stroke-width: .5;
  stroke-miterlimit: 10;
  stroke-dasharray: 3px;
}
.chart svg .circle {
  fill: none;
  stroke: #262040;
}
.chart svg .rect {
  fill: #fff;
}

JavaScript

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

// Сreated by vereschak@gmail.com
// -----------------------------------------

var DodecagonChart = function () {
  function DodecagonChart(svg) {
    _classCallCheck(this, DodecagonChart);

this.svg = svg;
    this.initProgress();
  }

_createClass(DodecagonChart, [{
    key: "initProgress",
    value: function initProgress() {
      this.circle = this.svg.querySelector("circle");
      this.dodecagon = this.svg.querySelector(".dodecagon--solid");
      this.setOffset(this.circle);
      this.setOffset(this.dodecagon);

TweenMax.set([this.circle, this.dodecagon], {
        rotation: -90.1,
        transformOrigin: "50% 50%"
      });

this.svg.style.opacity = 1;
    }
  }, {
    key: "getCircleTotalLength",
    value: function getCircleTotalLength() {
      var r = this.getAttribute('r');
      var circleLength = 2 * Math.PI * r;
      return circleLength;
    }
  }, {
    key: "setOffset",
    value: function setOffset(el) {
      if (el.tagName === 'circle') {
        el.getTotalLength = this.getCircleTotalLength.bind(el);
      }
      var total = el.totalLength = el.getTotalLength();
      el.style.strokeDasharray = total;
      el.style.strokeDashoffset = total;
    }
  }, {
    key: "drawStroke",
    value: function drawStroke(el, percent) {
      var total = el.totalLength;
      el.style.opacity = 1;
      TweenMax.set(el, {
        clearProps: "opacity"
      });

var percentOffset = Math.ceil(total - total / 100 * percent);
      percentOffset = percentOffset < 0 ? 0 : percentOffset;
      percentOffset = percentOffset > total ? total : percentOffset;

TweenMax.to(el, .8, {
        strokeDashoffset: percentOffset,
        ease: Power2.easeInOut
      });
    }
  }, {
    key: "setPercent",
    value: function setPercent(percent) {
      this.drawStroke(this.circle, percent);
      return this;
    }
  }, {
    key: "setStep",
    value: function setStep(step) {
      step = step >= 6 ? 6 : Math.abs(step);
      var percent = 100 / 6 * step;
      this.drawStroke(this.dodecagon, percent);
      return this;
    }
  }]);

return DodecagonChart;
}();

window.chart = new DodecagonChart(document.querySelector(".chart svg"));

// example

$(document).ready(function () {
  var debouncePercent = void 0,
      debounceStep = void 0;
  $('input.percent').on('keyup change ready', function () {
    var _this = this;

clearTimeout(debouncePercent);
    debouncePercent = setTimeout(function () {
      return chart.setPercent(_this.value);
    }, 200);
  });

$('input.step').on('keyup change ready', function () {
    var _this2 = this;

clearTimeout(debounceStep);
    debounceStep = setTimeout(function () {
      return chart.setStep(_this2.value);
    }, 200);
  });

$('input').change();
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg