创建 Jquery 条形图答案

【问题标题】：Creating Jquery bar graph创建 Jquery 条形图
【发布时间】：2015-05-08 07:14:34
【问题描述】：

好的，所以我用 jquery 创建了这个条形图，并试图在我的网站上显示它。我在 CodePen 中对此进行了测试，它可以正常工作，但是当我将代码复制到我的网站时，它无法正常工作。

我在我的标题中链接到 jquery 库，我有： https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js

现在我的问题是 .bar 没有显示和动画，但其他所有内容，如边框、标签和其他所有内容，但不是图表。有人可以帮帮我吗？

我的 HTML 如下：

<div id="chart">
          <ul id="skill">
            <li><span>Proficient</span></li>
            <li><span>Above Average</span></li>
            <li><span>Average</span></li>
            <li><span>Basic</span></li>
          </ul>

          <ul id="bars">
            <li><div data-height="120" class="bar"></div><span>Graphic Design</span></li>
            <li><div data-height="240" class="bar"></div><span>HTML 5</span></li>
            <li><div data-height="180" class="bar"></div><span>CSS / SASS</span></li>
            <li><div data-height="120" class="bar"></div><span>Javascript & JQuery</span></li>
            <li><div data-height="180" class="bar"></div><span>Content Management Systems (CMS)</span></li>
            <li><div data-height="120" class="bar"></div><span>PHP</span>
            </li>
            <li><div data-height="180" class="bar"></div><span>Videography</span>
            </li>
            <li><div data-height="120" class="bar"></div><span>Flash & ActionScript</span>
            </li>
            <li><div data-height="120" class="bar"></div><span>3-D Animation & Pritning</span>
            </li>
          </ul>
        </div>

SASS：

  #chart {
    width: 90%;
    height: 450px;
    margin: 30px auto;
    display: block;

    #skill {
      width: 10%; 
      height: 100%;
      margin: 0;
      padding: 0;
      display: inline-block;
      float: right;

      li {
        text-align: center;
        list-style: none;
        height: 20px;
        border-bottom: 2px solid #c7c7c7;
        margin: 40px 0;

        span {
          color: #d2f9c2;
        }
      }
    }

    #bars {
      display: inline-block;
      width: auto;
      height: 300px;
      padding: 0;
      margin: 0 15px 0 0;
      float: right;
      border-bottom: 2px solid $background;

      li {
        display: table-cell;
        width: 100px;
        height: 300px;
        margin: 0;
        text-align: center;
        position: relative;

        .bar {
          display: block;
          width: 60px;
          margin-left: 15px;
          background: linear-gradient(#d2f9c2, #379f53);
          position: absolute;
          bottom: 0;
        }

        span {
          color: #eee;
          width: 202px;
          position: absolute;
          bottom: -7em;
          left: 1.5em;
          text-align: left;
          transform: rotate(40deg);
        }
      }
    }
  }

JQuery:

$(document).ready(function() {
  $("#bars li .bar").each( function( key, bar ) {
    var height = $(this).data('height');

    $(this).animate({
      'height' : height 
    }, 1000);
  });
});

请帮忙？

【问题讨论】：

控制台有错误吗？顺便说一句，这不是纯 CSS。
如果它在 Codepen 中有效（链接可用？）但在服务器上无效，则代码似乎不太可能是问题所在。另外，这不是 CSS……它是 SASS（我认为）。
1) 控制台中有任何错误信息吗？ 2) 为什么不用ChartJS之类的图表插件，它支持条形图？
我不想使用插件，因为我想从头开始构建它（排序）.. 为什么如此严重地依赖插件我是通过始终使用插件来了解 php、jquery 和一切的.我想学习这些东西，所以我可以偶尔自己做一些事情

标签： javascript jquery html css sass

【解决方案1】：

我得到了这个工作。感谢大家的反馈。我最终将 JQuery 放在了代码的错误区域。

我的代码：

<?php /* Template Name: Experience Page */ ?>

<?php get_header(); ?>
<!--<div class="main">-->
    <div class="container">
        <div class="experience">
        </div>
    </div>

    <div class="graph">
        <div class="container">
            <div id="chart">
              <ul id="skill">
                <li><span>Proficient</span></li>
                <li><span>Above Average</span></li>
                <li><span>Average</span></li>
                <li><span>Basic</span></li>
              </ul>

              <ul id="bars">
                <li><div data-height="120" class="bar"></div><span>Graphic Design</span></li>
                <li><div data-height="240" class="bar"></div><span>HTML 5</span></li>
                <li><div data-height="180" class="bar"></div><span>CSS / SASS</span></li>
                <li><div data-height="120" class="bar"></div><span>Javascript & JQuery</span></li>
                <li><div data-height="180" class="bar"></div><span>Content Management Systems (CMS)</span></li>
                <li><div data-height="120" class="bar"></div><span>PHP</span>
                </li>
                <li><div data-height="180" class="bar"></div><span>Videography</span>
                </li>
                <li><div data-height="120" class="bar"></div><span>Flash & ActionScript</span>
                </li>
                <li><div data-height="120" class="bar"></div><span>3-D Animation & Pritning</span>
                </li>
              </ul>
            </div>
        </div>
    </div>

    <div class="projects">
        <?php dynamic_sidebar( 'projects_position' ); ?>
    </div>
</div> <!--.main-->
<?php get_footer(); ?>

<script type="text/javascript">
    $(document).ready(function() {
      $("#bars li .bar").each( function( key, bar ) {
        var height = $(this).data('height');

        $(this).animate({
          'height' : height 
        }, 1000);
      });
    });
</script>

SASS：

.experience {


height: 350px;
}

.graph {
  overflow: hidden;
  background: $darkgrey;

  #chart {
    width: 90%;
    height: 450px;
    margin: 30px auto;
    display: block;

    #skill {
      width: 10%; 
      height: 100%;
      margin: 0;
      padding: 0;
      display: inline-block;
      float: right;

      li {
        text-align: center;
        list-style: none;
        height: 20px;
        border-bottom: 2px solid #c7c7c7;
        margin: 40px 0;

        span {
          color: #d2f9c2;
          font-size: 1.2em;
          font-weight: 600;
        }
      }
    }

    #bars {
      display: inline-block;
      width: auto;
      height: 300px;
      padding: 0;
      border-bottom: 2px solid $background;

      li {
        display: table-cell;
        width: 100px;
        height: 300px;
        margin: 0;
        text-align: center;
        position: relative;

        .bar {
          display: block;
          width: 60px;
          margin-left: 15px;
          background: linear-gradient(#d2f9c2, #379f53);
          position: absolute;
          bottom: 0;
        }

        span {
          color: #eee;
          width: 202px;
          position: absolute;
          bottom: -7em;
          left: 1.5em;
          text-align: left;
          transform: rotate(40deg);
        }
      }
    }
  }
}

【讨论】：