Angular-Chart不渲染任何内容

Question

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

这是HTML中的图表：

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

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

在控制器中，我得到了这个：

  $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>

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

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

EDIT3//另外，当我在HTML-file中添加class=""时，它没有删除ng-hide类。

EDIT4// http://plnkr.co/edit/2Wr3HvMzcwfQG2tmsJgX?p=preview

Answer 1

当它是来自作用域的数据时，你不需要使用{{}}，所以你必须像这样改变：

<canvas 
    class="chart chart-line"
    data="graph.data"
    labels="graph.labels"
    series="graph.series"
    options="graph.options"
    legend="graph.legend"
    ng-show="graph.visible">
  </canvas>   

此外，数据应该是一个数组数组，如下所示

$scope.graph.data = [[1, 2, 3, 4, 5, 6, 7, 8]];

请看这里的工作柱塞(由Grundy在评论中修复)：http://plnkr.co/edit/xQ42shTY6qrteNXOYX2F?p=preview

Answer 2

在canvas上添加以下div容器为我解决了这个问题，请检查以下内容：

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