显示序列但没有数据的角度图

Question

当我尝试使用angular-chart框架时，我可以看到我定义的系列，但看不到标签和数据。我在我的index.html中包含了以下三个文件

<link rel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css">
<script src="bower_components/Chart.js/Chart.js"></script>
<script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>

这些是我在$scope中定义的变量

$scope.series = ["First", "Second"];
$scope.labels = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
$scope.data = [
    [12, 13, 8, 4, 29],
    [6, 12, 9, 8, 25]
];

并且它只显示以下内容：

​

我做错了什么？

编辑:在进一步研究后，我注意到当我在页面上执行back -> forward时，图形显示出来了。所以刷新后你就会丢失图表...

我可以像这样推迟作用域变量，以便在刷新后绘制图表：

setTimeout(function (){
        $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
        $scope.series = ['Series A', 'Series B'];
        $scope.data = [
            [65, 59, 80, 81, 56, 55, 40],
            [28, 48, 40, 19, 86, 27, 90]
        ];
    }, 0);

这意味着时间问题，这是我无法解决的。

Answer 1

您的图表是否在隐藏/显示的元素/层次结构中(如ng-show或换出的类、引导面板...)？

似乎正在发生的事情是，Chart.js将画布的高度设置为接近0 (当它被angular-chart初始化时，当作用域数据发生变化时，这反过来也会发生)。

出于同样的原因，延迟变量更改也是有效的-因为无论是什么父/样式导致画布的高度很小，现在都是它的全高。