Question

我需要同时使用easy-pie-chart和＆amp;我的项目中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

ha -just change

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

easy-pie-chart＆amp; jQueryUI冲突

1 个答案: