如何通过人力车和angularjs制作图表？

Question

我刚刚通过 angularjs 学习制作图表，通过 TagTree 学习人力车。有一些 ufo 目击数据并绘制图表。

我按照相同的步骤进行操作，但无法绘制与他们绘制的图形相似的图形。

请查看 Plunker 上的演示这是工作示例，谢谢 @VasanthSriram 我忘记包含 underscore.js 文件

<body ng-app="angularRickshawApp">
   <div ng-controller='MainCtrl'>
         <div class="header">
      <h3 class="text-muted">UFO sightings in 2008</h3>

      <rickshaw-chart data="sightingsByDate" color="blue" renderer="renderer" width="750" height="450">
      </rickshaw-chart>
    </div>
   </div>

<script>
   var app=angular.module('angularRickshawApp',[]);
    app.controller('MainCtrl', function ($scope, $http) {
      $http.get('sightings.json').success(function(result){
        $scope.sightings = result;

        $scope.renderer = 'line';

        $scope.sightingsByDate = _(result)
          .chain()
          .countBy(function(sighting){return sighting.sightedAt.$date;})
          .pairs()
          .map(function(pair){
            return {
              x: new Date(parseInt(pair[0])).getTime()/1000,
              y: pair[1]
            };
          })
          .sortBy(function(dateCount){return dateCount.x;})
          .value();

      })
    });

    app.directive('rickshawChart', function () {
      return {
        scope: {
          data: '=',
          renderer: '='
        },
        template: '<div></div>',
        restrict: 'E',
        link: function postLink(scope, element, attrs) {
          scope.$watchCollection('[data, renderer]', function(newVal, oldVal){
            if(!newVal[0]){
              return;
            }

            element[0].innerHTML ='';

            var graph = new Rickshaw.Graph({
              element: element[0],
              width: attrs.width,
              height: attrs.height,
              series: [{data: scope.data, color: attrs.color}],
              renderer: scope.renderer
            });

            graph.render();
          });
        }
      };
    });
</script>

Answer 1

您的 plunker 中缺少下划线库。只需添加库即可。

如何通过人力车和angularjs制作图表？

How to make graph through rickshaw and angularjs?

javascript

angularjs

d3.js

rickshaw