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

【问题标题】：Chart.js chart does not display when inside an ngIf.Chart.js 图表在 ngIf 内时不显示。
【发布时间】：2016-07-20 17:13:23
【问题描述】：

我在使用 Chart.js 创建的引导面板中有一个简单的散点线图。在我将其放入 ngIf div 之前，它可以正常工作/显示。有没有人遇到过这个？关于如何使图表显示的任何想法？在我的示例中，ngIf 的要点是仅在填充变量chartData 后才显示panel-body 的内容（即图表）。

这是我的图表代码（我已经注释掉了 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>-->

【问题讨论】：

标签： html angularjs twitter-bootstrap angular chart.js

【解决方案1】：

当您尝试初始化图表时，DOM 中不存在#myChart。尝试使用ng-show 而不是ng-if。

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

希望对你有帮助。

【讨论】：

谢谢。因为我在 Angular 2 中开发，所以我不得不使用 [hidden] 属性。所以 [hidden]="!chartData"
@Roka545 我遇到了和你一样的问题，如果你不说我找不到解决办法，谢谢！ Angular 6 也有同样的问题，只是你需要使用指令 [hidden]。

【解决方案2】：

您必须在创建 div 之后才创建 Chart 对象，因此请在更改 chartData.length 的同一位置调用创建 Chart 的函数，而不是在创建组件后立即调用它

【讨论】：