javascript - Angular-Chart 不渲染任何东西

Question

我正在使用 AngularJS 构建应用程序。在这个应用程序中，我想显示一个包含一些数据的折线图。我有一个包含两个“标签”的页面。我为此使用了自己的实现:顶部的两个按钮，$scope.graph.visible bool 值，通过单击这些按钮进行设置。

这是 HTML 中的图表:

<canvas 
  data="{{graph.data}}"
  labels="{{graph.labels}}"
  options="{{graph.options}}"
  legend="{{graph.legend}}"

  ng-show="{{graph.visible}}">
</canvas> 

在 Controller 中我得到了这个:

  $scope.graph.data = [1, 2, 3, 4, 5, 6, 7, 8];
  $scope.graph.labels = ['hoi', 'doei', 'hallo', 'hee', 'hoi', 'doei', 'hallo', 'hee',];
  $scope.graph.options = {
    animation: false
  };
  $scope.graph.legend = true;

在页面的源代码中我看到了这个(当图表应该可见时):

<canvas data="[1,2,3,4,5,6,7,8]" labels="["hoi","doei","hallo","hee","hoi","doei","hallo","hee"]" options="{"animation":false}" series="" colours="" getcolour="" click="" hover="" legend="true" ng-show="true" class="ng-hide" style="">
</canvas>

编辑//我想知道为什么它有类 ng-hide

EDIT2//当我手动删除 ng-hide 类时，我可以看到带有 Web 检查器的白色 block 。否则我什至找不到它。

EDIT3//另外，当我在 HTML 文件中添加 class="" 时，它不会删除 ng-hide 类。

编辑4//http://plnkr.co/edit/2Wr3HvMzcwfQG2tmsJgX?p=preview

Answer 1

在 canvas 上添加以下 div 容器解决了我的问题，检查以下内容:

<div class="chart-container" ng-show="graph.visible">
  <canvas #myChart class="my-4" width="900" height="380"></canvas>
</div>