高效的html按钮上的全屏功能，用于以角度显示Highchart

编程问答 2022-07-27

问题描述

您好，我一直在寻找highchart中图表的全屏功能。我一直在访问该网站，并获得了link。

在javascript中，您可以通过简单地处理click事件来实现此目的

document.getElementById('button').addEventListener('click',function () {
    chart.fullscreen.toggle();
});

我也尝试过同样的方法来绘制角度高图：

ngOnInit(){
  this.progressChart = Highcharts.chart(this.donutContainer.nativeElement,this.donutoptions,() => {
  /*
    Do things here after chart is drawn
  */
  }) 
}
onFullScreenClick(){
    this.progressChart.fullscreen.toggle()
}

但是似乎这段代码无法正常工作。我在某处读过，您也可以使用toggleFullScreen()。但这也不可行。

解决方法

全屏需要全屏模块，因此，如果未导入和初始化，则可能是原因。

import HC_fullscreen from 'highcharts/modules/full-screen.js';
HC_fullscreen(Highcharts);

我为您准备了一个简单的演示，向您展示了可能的解决方案。我在那儿使用官方的highcharts-angular包装器（建议您检查一下，这可能会使使用角形高图表工作时的生活更加轻松），但是没有包装器的解决方案应该相似。

文档：
https://github.com/highcharts/highcharts-angular

实时演示： （请注意，全屏模式无法在stack-blitz框架内运行，但以下示例将在实际项目中运行）
https://stackblitz.com/edit/highcharts-angular-basic-line-abnznx?file=src/app/app.component.ts

angularangularfullscreenfullscreenhighchartshighchartsjavascript