文章/答案/技术大牛

发布

社区首页 >问答首页 >当使用nvd3 + angular库交互折线图时，谷歌Chrome中的Aw捕捉

问当使用nvd3 + angular库交互折线图时，谷歌Chrome中的Aw捕捉
EN

Stack Overflow用户

提问于 2016-04-05 13:42:02

回答 1查看 466关注 0票数 1

我使用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);        
});

可能会因性能内存而崩溃。任何人都可以帮助我或者给我一些建议

d3.js

nvd3.js

javascript

angularjs

google-chrome

回答 1

Stack Overflow用户

发布于 2016-04-06 00:46:00

默认情况下，angular指令使用非常昂贵的$watch过程来跟踪数据，这最终会导致内存泄漏。

要关闭它，您可以添加{deepWatchDataDepth: 0}或{deepWatchData: false}配置属性。之后，如果数据发生变化，图表将不会自动更新，我们必须手动更新图表。为此，我们使用指令api属性。

<nvd3 options="options" data="data" api="api" config="{deepWatchDataDepth: 0}"></nvd3>

当数据发生变化时，我们只需更新图表

$scope.api.update()

试试updated demo

您还可以在docs中阅读有关属性和用例的更多信息

不知道这个答案是否对你有帮助。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36418008

复制

相似问题

问当使用nvd3 + angular库交互折线图时，谷歌Chrome中的Aw捕捉
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当使用nvd3 + angular库交互折线图时，谷歌Chrome中的Aw捕捉EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当使用nvd3 + angular库交互折线图时，谷歌Chrome中的Aw捕捉
EN