Angular-图表未呈现任何内容
Angular-Chart not rendering anything
我正在使用 AngularJS 构建应用程序。在这个应用程序中,我想显示一个包含一些数据的折线图。我得到一个包含两个 'tabs' 的页面。我为此使用了自己的实现:
顶部的两个按钮,$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>
编辑//我想知道为什么它有 class ng-hide
EDIT2// 当我手动删除 ng-hide
class 时,我可以看到带有 Web 检查器的白色块。否则我什至找不到。
EDIT3// 另外,当我在 HTML 文件中添加 class=""
时,它不会删除 ng-hide
class.
当数据来自范围时,您不必使用 {{}},因此您必须这样更改:
<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]];
在此处查看工作中的 Plunker(由 Grundy 在评论中修复):http://plnkr.co/edit/xQ42shTY6qrteNXOYX2F?p=preview
在 canvas
上添加以下 div
容器解决了我的问题,
检查以下内容:
<div class="chart-container" ng-show="graph.visible">
<canvas #myChart class="my-4" width="900" height="380"></canvas>
</div>
我正在使用 AngularJS 构建应用程序。在这个应用程序中,我想显示一个包含一些数据的折线图。我得到一个包含两个 'tabs' 的页面。我为此使用了自己的实现:
顶部的两个按钮,$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>
编辑//我想知道为什么它有 class ng-hide
EDIT2// 当我手动删除 ng-hide
class 时,我可以看到带有 Web 检查器的白色块。否则我什至找不到。
EDIT3// 另外,当我在 HTML 文件中添加 class=""
时,它不会删除 ng-hide
class.
当数据来自范围时,您不必使用 {{}},因此您必须这样更改:
<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]];
在此处查看工作中的 Plunker(由 Grundy 在评论中修复):http://plnkr.co/edit/xQ42shTY6qrteNXOYX2F?p=preview
在 canvas
上添加以下 div
容器解决了我的问题,
检查以下内容:
<div class="chart-container" ng-show="graph.visible">
<canvas #myChart class="my-4" width="900" height="380"></canvas>
</div>