angular - 使用套接字时,实时数据中的 amChart 中的“图表未处理”
问题描述
我有类似的问题 amChart“图表未处理”警告导致内存泄漏。
对于解决方案,我浏览了这个 https://www.amcharts.com/docs/v4/tutorials/chart-was-not-disposed/
但是当我使用套接字更新图表(实时图表)时,我没有静态数据。我正在使用数据库中的套接字将动态数据推送到 amChart 中。我无法使用chart.dispose()
which 不适用于我的代码,老实说,我不确定我是否chart.dispose()
以正确的方式使用。
因为我已经在我的角度服务中实现了 amChart 代码,如下所示。
在我的角度服务中。
init( currentChart, productChart, gaugeChart, legend ) {
this.getConfig( currentChart, productChart, gaugeChart, legend );
this.getConfigMeag();
this._today = this.datePipe.transform( this._today, 'yyyy-MM-dd HH:mm:ss' );
this._todate = this.datePipe.transform( this._today, 'yyyy-MM-dd' );
let socket = io.connect( DatabaseUtility.extractIpFromAddressBar );
socket.on( 'socketUpdate', ( data ) => {
this._today = Date.now();
this._today = this.datePipe.transform( this._today, 'yyyy-MM-dd HH:mm:ss' );
this._todate = this.datePipe.transform( this._today, 'yyyy-MM-dd' );
this.getCurrentData( this._today, productChart, gaugeChart, legend );
this.getCurrentYieldData( this._todate, currentChart);
} );
}
liveChart( alarmCheck, warningCheck, currentChart ) {
if ( !this._liveChart) {
return;
}
if(this._chart){
this._chart.dispose(); //When I added here still I'm getting the "Chart was not disposed" warning
}
this._chart = am4core.create( currentChart.nativeElement, am4charts.XYChart );
this._chart.cursor = new am4charts.XYCursor();
this._chart.data = this._liveChart;
if(this._chart){
this._chart.dispose(); //When I added here it shows "Error: EventDispatcher is disposed"
}
this._chart.legend = new am4charts.Legend();
this._chart.legend.labels.template.text = "Current Yield";
// Create axes
let dateAxis = this._chart.xAxes.push( new am4charts.DateAxis() as any );
dateAxis.dataFields.category = "Date";
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.minGridDistance = 40;
dateAxis.renderer.labels.template.location = 0.0001;
dateAxis.dateFormatter.inputDateFormat = "YYYY-MM-DD, HH:mm";
dateAxis.dateFormats.setKey( "minute", "HH:mm" );
dateAxis.baseInterval = {
"timeUnit": "minute",
"count": this._configValues.cycleTime
};
dateAxis.renderer.line.strokeOpacity = 1;
dateAxis.renderer.line.strokeWidth = 1;
dateAxis.renderer.line.stroke = am4core.color( "#3787ac" );
let valueAxis = this._chart.yAxes.push( new am4charts.ValueAxis() as any );
valueAxis.autoGridCount = false;
valueAxis.max = 110;
valueAxis.min = 0;
valueAxis.title.text = "(%)";
valueAxis.title.align = "center";
valueAxis.title.fontWeight = 400;
valueAxis.unit = "%";
valueAxis.unitPosition = "right";
valueAxis.renderer.line.strokeOpacity = 1;
valueAxis.renderer.line.strokeWidth = 1;
valueAxis.renderer.line.stroke = am4core.color( "#3787ac" );
valueAxis.renderer.ticks.template.disabled = false;
valueAxis.renderer.ticks.template.strokeOpacity = 1;
valueAxis.renderer.ticks.template.stroke = am4core.color( "#495C43" );
valueAxis.renderer.ticks.template.strokeWidth = 2;
valueAxis.renderer.ticks.template.length = 10;
if ( warningCheck ) {
let range = valueAxis.axisRanges.create();
range.value = this._warningUpperLimit;
range.grid.stroke = am4core.color( "#cc3300" );
range.grid.strokeWidth = 2;
range.grid.strokeOpacity = 1;
range.label.inside = true;
range.label.text = "Warning Upper Limit";
range.label.fill = range.grid.stroke;
range.label.verticalCenter = "bottom";
let range2 = valueAxis.axisRanges.create();
range2.value = this._warningLowerLimit;
range2.grid.stroke = am4core.color( "#cc3300" );
range2.grid.strokeWidth = 2;
range2.grid.strokeOpacity = 1;
range2.label.inside = true;
range2.label.text = "Warning Lower Limit";
range2.label.fill = range2.grid.stroke;
range2.label.verticalCenter = "bottom";
}
if ( alarmCheck ) {
let range3 = valueAxis.axisRanges.create();
range3.value = this._alarmUpperLimit;
range3.grid.stroke = am4core.color( "#A96478" );
range3.grid.strokeWidth = 2;
range3.grid.strokeOpacity = 1;
range3.label.inside = true;
range3.label.text = "Alarm Upper Limit";
range3.label.fill = range3.grid.stroke;
range3.label.verticalCenter = "bottom";
let range4 = valueAxis.axisRanges.create();
range4.value = this._alarmLowerLimit;
range4.grid.stroke = am4core.color( "#A96478" );
range4.grid.strokeWidth = 2;
range4.grid.strokeOpacity = 1;
range4.label.inside = true;
range4.label.text = "Alarm Lower Limit";
range4.label.fill = range4.grid.stroke;
range4.label.verticalCenter = "bottom";
}
// Create series
let series = this._chart.series.push( new am4charts.LineSeries() as any );
series.tooltipText = "{date}\n[bold font-size: 17px]Value: {valueY}[/]";
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.tensionX = 0.8;
series.strokeWidth = 3;
series.strokeOpacity = 5;
let bullet = series.bullets.push( new am4charts.CircleBullet() );
bullet.strokeWidth = 2;
bullet.stroke = am4core.color( "#000" );
bullet.setStateOnChildren = true;
bullet.propertyFields.fillOpacity = "opacity";
bullet.propertyFields.strokeOpacity = "opacity";
let hoverState = bullet.states.create( "hover" );
hoverState.properties.scale = 1.7;
/* Create a cursor */
this._chart.cursor = new am4charts.XYCursor();
}
在我的角度分量中
ngAfterViewInit() {
this.zone.runOutsideAngular( () => {
this._service.init( this.currentChart, this.productChart, this.gaugeChart, this.legend );
} );
}
ngOnDestroy() : void {
this.zone.runOutsideAngular( () => {
if ( this._service.chart ) {
this._service.chart.dispose();
}
} );
}
HTML
<div class="tile__content">
<div [style.width.%]="100" [style.height.px]="480" #currentChart></div>
</div>
如果我使用am4core.disposeAllCharts()
,我不会看到任何图表。
哪个是正确的dispose
地方chartdata
?
解决方案
我不知道 Angular,但在 Vue.js 中我不得不处理图表并tick
再次创建它。所以我做了这样的事情:
loadChart(){
if (this.chart) {
this.chart.dispose();
this.chart = null;
}
this.chartIsLoading = true;
// other preparation code here
// clear and then new loading on the next tick is needed for the disposing to finish.
this.$nextTick(() => {
this.loadJsonCharts();
});
},
这是关于 Angular 中的刻度线的主题:何时以及为什么在 Angular 2 中使用“刻度线”?
希望能帮助到你!
推荐阅读
- reactjs - webpack --optimize-minimize vs -p
- ios - 如何在 Swift4 中获取另一个类的枚举内容?
- terminology - 指定既操作对象又返回值的函数,与前者或后者的函数相反?
- javascript - 如何使用 Axios 一次执行一项删除请求?
- angularjs - Angular Scope 变量将结果从 $http 附加到数据变量而不是覆盖它
- java - Spring Boot 中默认不使用自定义密钥生成器
- javascript - H1 标签不会只加载到我的页面上的 javascript 部分,这是为什么呢?
- c# - 在 asp.net 的 web.config 中将基于角色的身份验证设置为 defaultUrl
- jquery - 如何将 jquery 代码转换为 Angular 4?
- c# - 如何从其他函数访问变量?