Chart.js 图表在 ngIf 内时不显示。

Question

我在使用 Chart.js 创建的引导面板内有一个简单的散点线图。它工作/显示得很好，直到我将它放入 ngIf div 中。有人遇到过这个吗？关于如何显示图表有什么想法吗？在我的示例中，

ngIf

的要点是仅在填充变量

panel-body

后才显示

chartData

的内容（即图表）。

这是我的图表代码（我已经注释掉了 ngIf div）：

<!--<div *ngIf="chartData.length">-->
    <div class="panel panel-primary" style="border-color: #464646;">
        <div class="panel-heading" style="border-color: #BBBBBB; height: 35px; padding-top: 3px;">
            <div style="float: left; margin-top: 5px;">Line Chart</div>
        </div>

        <div class="panel-body">
            <div>
                <canvas id="myChart" width="325" height="325"></canvas>
            </div>
        </div>
    </div>
<!--/div>-->

Answer 1

当您尝试初始化图表时，DOM 中不存在

#myChart

。尝试使用

ng-show

而不是

ng-if

。

无论如何，一旦填充数据，您似乎就没有像您应该做的那样从控制器初始化图表。

希望有帮助。

Answer 2

您必须仅在创建 div 之后创建 Chart 对象，因此请在更改

chartData.length

的同一位置调用创建 Chart 的函数，而不是在创建组件后立即调用它

Answer 3

将 #myChart 保留在 DOM 中是解决我来到这里的问题的方法。 “ng-show”是 Angular 1.x 的一项功能。今天的答案是使用 [hidden] 属性绑定来隐藏元素而不将其从 DOM 中删除。

<div [hidden]="chartData.length">
    <div class="panel panel-primary" style="border-color: #464646;">
        <div class="panel-heading" style="border-color: #BBBBBB; height: 35px; padding-top: 3px;">
            <div style="float: left; margin-top: 5px;">Line Chart</div>
        </div>

        <div class="panel-body">
            <div>
                <canvas id="myChart" width="325" height="325"></canvas>
            </div>
        </div>
    </div>
</div>