Question

我有一个角度+离子应用程序，我在其中使用chartJS来显示一些数据。现在，图表在滑块上实现。 Link1 Link2并且存在类似的相关问题。我遇到的解决方案。从许多帖子中我将不得不破坏现有的图表并在我的窗口中重新创建。因为每当我通过投掷卓越改变选项时，视图都会爆炸，所有的幻灯片都不会横向相互靠近，开始垂直显示以及当我更改设备模式时。它实际上重新呈现页面，我可以正常查看它。

我已经尝试过使用ng-if但它不起作用。 那么如何在我的角度应用程序中销毁图表然后重新创建

关于我是如何做的一些HTML代码。

<div ng-if="metricArray">
        <ion-slide-box on-slide-changed="slideHasChanged($index)" style="height:50%">
            <ion-slide ng-repeat="metric in metricArray">
                <div style="text-align:center; margin-top:10px; color:#eee;">
                    {{metric.startDate}} &nbsp;&nbsp;{{metric.endDate}}
                </div>
                <canvas id="myCanvas" tc-chartjs-bar chart-options="options" chart-data="metric.data" auto-legend></canvas>
                <div class="row" style="margin-top:30px;">
                    <div style="width:33%; text-align:center">
                        <h6 style="color:#eee">MAX</h6>
                        <div class="circleBase type1 " style="padding:15px; margin-left: auto; margin-right: auto;">
                            <h6 style="color:#eee">{{metric.max}}</h6>
                            <p style="color:#eee">{{metricUnit}}</p>
                        </div>
                    </div>
                    <div style="width:33%; text-align:center">
                        <h6 style="color:#eee">MIN</h6>
                        <div class="circleBase type1 " style="padding:15px; margin-left: auto; margin-right: auto;">
                            <h6 style="color:#eee">{{metric.min}}</h6>
                            <p style="color:#eee">{{metricUnit}}</p>
                        </div>
                    </div>
                    <div style="width:33%; text-align:center">
                        <h6 style="color:#eee">AVG</h6>
                        <div class="circleBase type1 " style="padding:15px; margin-left: auto; margin-right: auto;">
                            <h6 style="color:#eee">{{metric.avg}}</h6>
                            <p style="color:#eee">{{metricUnit}}</p>
                        </div>
                    </div>
                </div>
            </ion-slide>
        </ion-slide-box>
    </div>

如何在chartJS中销毁图表

0 个答案: