使用angularjs-nvd3指令显示图表不起作用
使用angularjs-nvd3指令显示图表不起作用
提问于 2015-08-26 15:10:22
所以我做了一个简单的Angular - nvd3项目。我正在使用这个Github库中的liveData.example (angularjs-nvd3-directives)。为了使用我的REST API，我对它进行了一些改进。
这是我的REST API：
http://amr2.mybluemix.net/getmet/list这是我的代码：
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>Angular.js nvd3.js Live Data Chart Example</title>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<script src="js/angular.js"></script>
<script src="js/d3.js"></script>
<script src="js/nv.d3.js"></script>
<script src="js/moment.js"></script>
<script src="dist/angularjs-nvd3-directives.js"></script>
<link rel="stylesheet" href="nv.d3.css"/>
<script>
var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']);
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}
]);
app.factory('DataMeterDetail', ['$http', function($http){
var getData = function(_id, _rev){
return $http({
method: 'JSONP',
url: 'http://amr2.mybluemix.net/getmet/list'
});
}
return{
getDataDetail: function(_id, _rev){return getData(_id, _rev);}
}
}]);
app.factory('DataMeter', function(){
return {
cityId: 0,
units: 'imperial'
}
});
function ExampleCtrl($scope, DataMeterDetail, DataMeter){
function fetchData(){
DataMeterDetail.getDataDetail(5506956, 'imperial')
.success(function(response){
console.log(response);
var dta = [{key:"100010001_20082015_0", values:[]}];
dta[0].values = response.list.map(function(d){
return [d._id, d._rev];
});
$scope.exampleData = dta;
});
}
fetchData();
$scope.xAxisTickFormatFunction = function(){
return function(d){
return d3.time.format('%x-%H:%M')(new Date(d*1000));
}
}
}
</script>
<style>
div{
font-family: sans-serif;
}
</style>
</head>
<body ng-app='nvd3TestApp'>
<div ng-controller="ExampleCtrl">
<input type="text" ng-model="cityName"/>
<div>Example Data</div> </div>
<nvd3-line-chart
data="exampleData"
id="exampleId"
width="800"
height="400"
showXAxis="true"
showYAxis="true"
tooltips="true"
interactive="true"
xAxisTickFormat="xAxisTickFormatFunction()"
margin="{left:100,top:20,bottom:20,right:10}"
yAxisLabel="Temperature (F)"
xAxisLabel="Date"
>
<svg></svg>
</nvd3-line-chart>
</div>
</body>
</html>现在代码不起作用了。你们能告诉我这段代码有什么问题吗？提前谢谢。
回答 1
Stack Overflow用户
发布于 2015-11-16 15:54:09
也许这可以帮助解决这个问题..我遇到了上面你提到的同样的问题。
我的代码片段如下。只要在定时器函数中使用$scope.apply即可。
setInterval(function(){
$scope.$apply(function(){
// var data= $scope.exampleData;
$scope.exampleData = data;
// console.log( 'Client ON ### setInterval called!! ' , $scope.exampleData[0].values[0]);
});
}, 200); // 0.2 sec页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32220085
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号