如何解决* ng用于导致charJs图表闪烁即使使用.destroy也是如此
我正在使用Angular 9和chartJs 2.9.3。 我遇到一个问题，当使用同一画布和.destroy（）函数在多个图表之间切换时，图表开始闪烁。奇怪的是，在html中指定了* ngFor时，会发生这种情况，而当删除* ngFor时，它们不会闪烁。我不确定问题是否是由于angular，chartJS或任何实现异常引起的。下面是代码：
打字稿：
companies: any[];
selectedCompany: any;
charts: any[] = [];
isCollapsed: boolean[] = [];
ESGSplit: any[] = [];
canvases: any;
@ViewChildren('mycharts',{ read: ElementRef }) chartElementRefs: QueryList<ElementRef>;
//Method used to change charts after loaded initially.
changeChartType(index,chartType) {
this.charts[index].chart.destroy();
let kpi = this.charts[index].kpi
var chartData = this.chartBuilderService.buildChart(chartType,kpi);
var chart = new Chart(this.canvases._results[index].nativeElement.getContext('2d'),chartData)
this.charts[index].chart = chart
}
//Method used to load charts on init
loadCompanyData(company) {
this.selectedCompany = company
this.backendService.getCompanyKpisData(company).subscribe(async (data) => {
this.charts = [];
Object.values(data)[0].forEach((kpi) => {
this.charts.push({
kpi: kpi
}
);
})
this.chartElementRefs.changes.subscribe((elementRefs) => {
this.canvases = elementRefs
this.canvases.map((canvas,indx) => { // For each canvas,save the chart on the charts array
let kpi = this.charts[indx].kpi
if(this.ESGSplit.indexOf(kpi.ESG) === -1) {
this.ESGSplit.push(kpi.ESG);
}
let chartTypes = this.chartBuilderService.supportedCharttypesForKPi(kpi)
console.log(chartTypes)
let chartData = this.chartBuilderService.buildChart(chartTypes[0],kpi)
var chart = new Chart(canvas.nativeElement.getContext('2d'),chartData)
this.charts[indx].chart = chart
this.charts[indx].types = chartTypes
})
});
})
}
这是html：
<body>
<div class="content-wrapper">
<section class="row">
<div class="col-3">
<div class="card hoverable" *ngIf="ESGSplit.length != 0">
<div class="sidebar">
<div class="sideNav" *ngFor="let eachESG of ESGSplit; let j = index">
<label class="dropdown-toggle" (click)="isCollapsed[j] = !isCollapsed[j]" role="button"
aria-expanded="false" aria-controls="collapseExample">
{{eachESG}}
</label>
<div *ngFor="let chart of charts; let i = index">
<div *ngIf="chart.kpi.ESG == eachESG">
<div [collapse]="isCollapsed[j]">
<a class=" angular-with-newlines" (click)="scrollToChart(i)"> {{chart.kpi.title}}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-9 d-flex flex-column">
<div class="container">
<div class="row mt-5" *ngFor="let chart of charts; let i = index">
<div class="col-sm-12" id="item-{{i}}">
<div class="card hoverable">
<div class="card-head">
<div class="card-header">
<div class="btn-group" id="pullleft">
<button data-toggle="dropdown" type="button" class="btn btn-default dropdown-toggle btn-sm">
<i class="fas fa-signal"></i>
</button>
<ul class="dropdown-menu" id="menuChoices" role="menu">
<li><a class="dropdown-item" (click)="changeChartType(i,type);"
*ngFor="let type of chart.types">{{type.title}}</a></li>
</ul>
</div>
</div>
</div>
<div id="parent-canvas" class="card-body">
<canvas id="mychart{{i}}" #mycharts></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
最后，* ngFor导致上述html中的问题。没有以下指定的* ngFor图表将不会闪烁。请注意，除了下面指定的内容外，html中还有其他* ngFor，它们从未遇到闪烁。
<div class="sideNav" *ngFor="let eachESG of ESGSplit; let j = index">
<label class="dropdown-toggle" (click)="isCollapsed[j] = !isCollapsed[j]" role="button"
aria-expanded="false" aria-controls="collapseExample">
{{eachESG}}
</label>
<div *ngFor="let chart of charts; let i = index">
<div *ngIf="chart.kpi.ESG == eachESG">
<div [collapse]="isCollapsed[j]">
<a class=" angular-with-newlines" (click)="scrollToChart(i)"> {{chart.kpi.title}}</a>
</div>
</div>
</div>
</div>
谢谢。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。