javascript Angular-Chart 不渲染任何东西
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29795409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular-Chart not rendering anything
提问by JeroenJK
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.visibleboolean which is being set by clicking those buttons.
我正在使用 AngularJS 构建一个应用程序。在这个应用程序中，我想显示一个包含一些数据的折线图。我有一个带有两个“标签”的页面。我为此使用了自己的实现：顶部的两个按钮，$scope.graph.visible布尔值是通过单击这些按钮设置的。
This is the chart in the HTML:
这是 HTML 中的图表：
<canvas
data="{{graph.data}}"
labels="{{graph.labels}}"
options="{{graph.options}}"
legend="{{graph.legend}}"
ng-show="{{graph.visible}}">
</canvas>
In the controller I got this:
在控制器中，我得到了这个：
$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>
EDIT// I wonder why it has the class ng-hide
编辑//我想知道为什么它有这个类 ng-hide
EDIT2// When I manually remove the ng-hideclass I can see a white block with web inspector. Otherwise I can''t even find that.
EDIT2//当我手动删除ng-hide类时，我可以看到带有 web 检查器的白色块。否则我什至找不到那个。
EDIT3// Also, when I add class=""in the HTML-file, it doesn't remove the ng-hideclass.
EDIT3//此外，当我添加class=""HTML 文件时，它不会删除ng-hide该类。
回答by Xavier Balloy
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]];
See the working Plunker here (fixed by Grundy in the comments) : http://plnkr.co/edit/xQ42shTY6qrteNXOYX2F?p=preview
在此处查看工作 Plunker（由 Grundy 在评论中修复）：http://plnkr.co/edit/xQ42shTY6qrteNXOYX2F?p=preview
回答by Ali Ezzat Odeh
Adding following divcontainer over the canvassolved the problem for me,
check the following:
添加以下div容器canvas为我解决了问题，请检查以下内容：
<div class="chart-container" ng-show="graph.visible">
<canvas #myChart class="my-4" width="900" height="380"></canvas>
</div>
