【发布时间】：2015-10-16 13:18:25
【问题描述】：
我刚刚从TagTree 学习通过angularjs 和人力车制作图表。有一些不明飞行物观测数据并绘制图表。
我遵循了相同的程序，但我无法绘制与他们绘制的图形相似的图形。
请在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>
【问题讨论】：
标签： javascript angularjs d3.js rickshaw