Question

我希望在我的角形锅炉板中实现以下代码。我对这个框架有点新意，所以我们非常感谢你们的耐心！

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

<div ng-app="myApp">
    <bars data="40,4,55,15,16,33,52,20"></bars>
</div>



  .chart {
    background: #eee;
    padding: 3px;
}

.chart div {
  width: 0;
  transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
}

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 5px;
  color: white;
  box-shadow: 2px 2px 2px #666;
}

angular.module('myApp', []).

   directive('bars', function ($parse) {
      return {
         restrict: 'E',
         replace: true,
         template: '<div id="chart"></div>',
         link: function (scope, element, attrs) {
           var data = attrs.data.split(','),
           chart = d3.select('#chart')
             .append("div").attr("class", "chart")
             .selectAll('div')
             .data(data).enter()
             .append("div")
             .transition().ease("elastic")
             .style("width", function(d) { return d + "%"; })
             .text(function(d) { return d + "%"; });
         } 
      };
   });

仅图表的HTML，CSS和JS代码摘录。我希望在我的代码中实现这一点，这对于HTML / CSS来说已经足够了（我已经在我的index.html的标题中添加了一个新的div和样式表）。

我想知道如何将JS位代码添加到我的app.js.我现有的代码已经列出了几个模块，但没有var app = angular.module('myApp', ['zingchart-angularjs']);类型语句。

当我只是复制上面的代码时，我的网页上看不到任何图表。

感谢任何帮助 - 谢谢！

D3.JS for Angs中的图形：将控制器添加到app.js

0 个答案: