角图不呈现任何内容 [英] Angular-Chart not rendering anything

问题描述

我建立使用AngularJS的应用程序。在这个程序，我想显示线路图与一些数据。我有一个页面有两个标签。我用我自己的实现此：
在顶部的两个按钮， $ scope.graph.visible 正在由点击这些按钮设定布尔。

I'm building an app using AngularJS. In this app I want to show a line-chart with some data. I got a page with two 'tabs'. I used my own implementation for this: Two buttons at the top, $scope.graph.visible boolean which is being set by clicking those buttons.

这是在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;

在页面上我看到这个（当图应该是可见的）来源：

In the source of the page I see this (when the graph should be visible):

<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-隐藏

EDIT2 //当我手动删除 NG-隐藏类，我可以看到一个白色的块与网页检查。否则，我甚至can''t发现。

EDIT2// When I manually remove the ng-hide class I can see a white block with web inspector. Otherwise I can''t even find that.

EDIT3 //此外，当我加入类=中的HTML文件，它不会删除 NG-隐藏类。

EDIT3// Also, when I add class="" in the HTML-file, it doesn't remove the ng-hide class.

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

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

推荐答案

您不必使用{{}}当它从范围的数据，所以你必须改变这样的：

You don't have to use {{}} when it's data from the scope, so you have to change like this :

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

此外，数据应该是阵列的像

Furthermore, data should be an array of array like

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

在这里看到工作Plunker（由格兰迪固定在评论）：的http：/ /plnkr.co/edit/xQ42shTY6qrteNXOYX2F?p=$p$pview

这篇关于角图不呈现任何内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！