javascript - easy-pie-chart 和 jQueryUI 冲突

Question

我需要同时使用 easy-pie-chart & jQueryUI在我的项目中。但是，当我将 jqueryui js 文件链接到我的 html 文件时，所有图表百分比值都返回“NaN”。

在链接 jqueryui 之前:http://jsfiddle.net/opjynaso/

在链接 jqueryui 之后:http://jsfiddle.net/opjynaso/1/

有什么解决办法吗？!

HTML:

<div class="skill-items">

    <!-- Skill chart item -->
    <div class="skill-chart-container">
        <div class="skill-chart">
          <span class="chart" data-percent="80">

              <div class="percent-container">
                  <span class="percent-number"></span>
                  <span class="percent-sign">%</span>
              </div>
          </span>
        </div>
        <span class="experience-title">Skill 1</span>
    </div>

    <!-- Skill chart item -->
    <div class="skill-chart-container">
        <div class="skill-chart">
          <span class="chart" data-percent="70">

              <div class="percent-container">
                  <span class="percent-number"></span>
                  <span class="percent-sign">%</span>
              </div>
          </span>
        </div>
        <span class="experience-title">Skill 2</span>
    </div>

    <!-- Skill chart item -->
    <div class="skill-chart-container">
        <div class="skill-chart">
          <span class="chart" data-percent="60">

              <div class="percent-container">
                  <span class="percent-number"></span>
                  <span class="percent-sign">%</span>
              </div>
          </span>
        </div>
        <span class="experience-title">Skill 3</span>
    </div>

    <!-- Skill chart item -->
    <div class="skill-chart-container">
        <div class="skill-chart">
          <span class="chart" data-percent="90">

              <div class="percent-container">
                  <span class="percent-number"></span>
                  <span class="percent-sign">%</span>
              </div>
          </span>
        </div>
        <span class="experience-title">Skill 4</span>
    </div>

</div>

CSS:

.skill-items{
  text-align: center;
}
.skill-chart-container{
  width: calc(25% - 30px);
  float: left;
  padding: 15px;
}

.skill-chart-container{
    margin-bottom: 55px;
}

.percent-container{
    color: #333;
    font-family: sans-serif;
    font-size: 40px;
    font-weight: 300;
    padding-left: 5px;
    position: relative;
    top: 110px;
}

.percent-sign{
    font-size: 16px;
    margin-left: -6px;
}

.experience-title{
    color: #333;
    display: inline-table;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: 400;
    margin-top: 30px;
}

JS:

$(document).ready(function(e) {
    $('.chart').easyPieChart({
        easing: 'easeInOutCirc',
        animate:{ duration: 3000, enabled: true },
        onStep: function(from, to, percent) {
            $(this.el).find('.percent-number').text(Math.round(percent));
        },
        barColor: "#07cafa",
        lineWidth:8,
        lineCap:'butt',
        scaleLength:20,
        size:'166',
        scaleColor:false,
         trackColor:'rgba(255,255,255,0)'
    });
});

Answer 1

哈哈 - 只是改变

easing: 'easeInOutCirc' to 'easeInOut'
easing: 'easeOutBounce' to 'easeOutBounce'