时间戳

首页 > 解决方案 > 角高图表的单独 html 按钮上的全屏功能

javascript - 角高图表的单独 html 按钮上的全屏功能

问题描述

您好，我一直在寻找 highchart 中图表的全屏功能。我一直在引用该站点并获得了此链接。

在javascript中，您可以通过简单地处理点击事件来实现这一点

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

我已经为 angular highcharts 尝试过同样的事情：

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

但似乎这段代码不起作用。我在某处读过你也可以使用toggleFullScreen(). 但这也是不可行的。

标签： javascriptangularhighchartsfullscreen

解决方案

全屏需要全屏模块，所以如果你没有导入和初始化，这可能是原因。

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

我为您准备了一个简单的演示，向您展示可能的解决方案。我在highcharts-angular那里使用官方包装器（我鼓励你检查一下，它可能会让你在使用角度的 highcharts 时更轻松），但是没有包装器的解决方案应该是相似的。

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

现场演示：（ 注意 - 全屏在 stack-blitz 框架内不起作用，但以下示例将在实际项目中起作用）
https://stackblitz.com/edit/highcharts-angular-basic-line-abnznx ?file=src/app/app.component.ts

推荐阅读