在ngIf中不显示Chart.js图表​​。 [英] Chart.js chart does not display when inside an ngIf.

问题描述

在Chart.js创建的引导面板中有一个简单的分散折线图。它工作/显示完美，直到我把它放在ngIf div。有没有人遇到过这个？有关如何制作图表的任何想法？在我的例子中 ngIf 的要点是只显示 panel-body 的内容（这是图表）一旦变量 chartData 被填充。

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

 <！ - < div * ngIf =chartData.length>  - > 
< div class =panel panel-primarystyle =border-color：＃464646;> 
< div class =panel-headingstyle =border-color：#BBBBBB; height：35px; padding-top：3px;> 
< div style =float：left; margin-top：5px;>折线图< / div> 
< / div> 
 
< div class =panel-body> 
< div> 
< canvas id =myChartwidth =325height =325>< / canvas> 
< / div> 
< / div> 
< / div> 
<！ -  / div>  - > 
  

解决方案

#myChart 不存在于DOM中。尝试使用 ng-show 而不是 ng-if 。

<无论如何，一旦数据填充完毕，它就像你没有从控制器初始化图表一样，就像你应该做的那样。

希望它有帮助。

I have a simple scatter line chart within a bootstrap panel created with Chart.js. It works/displays perfectly fine until I put it inside an ngIf div. Has anyone come across this? Any idea on how to make the chart display? The point of the ngIf in my example is to only show the panel-body's content (which is the chart) once the variable chartData has been populated.

Here's my chart code (I've commented out the 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>-->

解决方案

#myChart is not present in the DOM when you're trying to initialize the chart. Try with ng-show instead of ng-if.

Anyhow, it loook like you're not initializing the chart from the controller once the data is populated, like you should do.

Hope it helps.

这篇关于在ngIf中不显示Chart.js图表​​。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！