我使用 angular.js 和 nvd3.js 创建 4 个折线图，例如实时折线图。
30 分钟后，我的 Chrome 浏览器显示 Aw Snap。
在Mozilla Firefox中，正常运行
index.html 喜欢:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<nvd3 options="options" data="data"></nvd3>
<nvd3 options="options1" data="data"></nvd3>
<nvd3 options="options" data="data"></nvd3>
<nvd3 options="options1" data="data"></nvd3>
</body>
</html>
和app.js
var app = angular.module('plunker', ['nvd3'])
.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'lineChart',
height: 180,
margin : {
top: 20,
right: 20,
bottom: 40,
left: 55
},
x: function(d){ return d.x; },
y: function(d){ return d.y; },
useInteractiveGuideline: true,
duration: 500,
yAxis: {
tickFormat: function(d){
return d3.format('.01f')(d);
}
}
}
};
$scope.options1 = angular.copy($scope.options);
$scope.options1.chart.duration = 0;
$scope.options1.chart.yDomain = [-1,1];
$scope.data = [{ values: [], key: 'Random Walk' }];
$scope.run = true;
var x = 0;
setInterval(function(){
if (!$scope.run) return;
$scope.data[0].values.push({ x: x, y: Math.random() - 0.5});
if ($scope.data[0].values.length > 200) $scope.data[0].values.shift();
x++;
$scope.$apply(); // update both chart
}, 500);
});
可能是性能内存导致崩溃。任何人都可以帮助我或给我一些想法
最佳答案
默认情况下， Angular Directive(指令)使用相当昂贵的 $watch 过程来跟踪数据，这最终可能导致内存泄漏。
要关闭它，您可以添加 {deepWatchDataDepth: 0} 或 {deepWatchData: false} 配置属性。之后如果数据发生变化，图表不会自动更新，我们必须手动更新图表。为此，我们使用指令 api 属性。
<nvd3 options="options" data="data" api="api" config="{deepWatchDataDepth: 0}"></nvd3>
当数据发生变化时，我们只需更新图表
$scope.api.update()
您还可以在 docs 中阅读有关属性和用例的更多信息。
不知道这个回答是否对您有帮助。
关于javascript - 当使用 nvd3 + Angular 库进行交互式折线图时，Google Chrome 中的哇卡顿，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36418008/