Question

我需要在highcharts中从全屏获取逃生键的事件，以便在逃离全屏后可以调整容器的高度。

Answer 1

Highcharts要求浏览器全屏显示。

您可以收听各种全屏更改事件，并据此执行一些操作：

if (document.addEventListener) {
  document.addEventListener('webkitfullscreenchange', exitHandler, false);
  document.addEventListener('mozfullscreenchange', exitHandler, false);
  document.addEventListener('fullscreenchange', exitHandler, false);
  document.addEventListener('MSFullscreenChange', exitHandler, false);
}

function exitHandler() {
  if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
    console.log('Exiting fullscreen. Doing chart stuff.');
    setContainerHeight(); // do your magic
  }
}

有关检测全屏显示的一般情况，请参见this JSFiddle demonstration或参见this discussion。

Answer 2

虽然上述方法可行，但我认为我放弃了解决方案，因为它对我的环境不理想（同一页上有多个图表，如here所述；部分链接到具有不同需求的模块）。

当图表退出全屏模式时，我最终使用Highcharts responsive callback option执行代码。

var sql = "SELECT RTFPressTableID" +
      "FROM RTFPressTables" +
      "WHERE PressCloseTime BETWEEN CONVERT(DATE, 'Date 06:00:00:000 AM',109) >= @Date AND CONVERT(DATE, 'Date 08:00:00:000 AM',109) <= @Date";
using (SqlConnection conn = new SqlConnection("Data Source = ; Initial Catalog = ; Integrated Security = True"))
{
    conn.Open();
    using (SqlCommand command = new SqlCommand(sql, conn))
    {
        command.Parameters.Add("@Date", SqlDbType.DateTime);
        command.Parameters["@Date"].Value = dateTimePicker1.Value.Date;
        SqlDataReader reader = command.ExecuteReader();
        while (reader.Read())
        {
        }
    }
}

本质上：

定义一个变量：responsive: { rules: [{ condition: { // A callback function to gain complete control on when the responsive rule applies. Return true if it applies callback: function () { if (this.chartHeight > (window.innerHeight / 2) || this.chartWidth > (window.innerWidth / 2)) { console.log('responsive cb true:', this.renderTo.id); _fsChartID = this.renderTo.id; return true; } else { console.log('responsive cb false:', this.renderTo.id); if (this.renderTo.id === _fsChartID) { // only hit when exiting fullscreen _fsChartID = null; // reset _fsChartID to prevent infinite loop this.redraw(); // call whatever function you need when exiting fullscreen } return false; } } } }] }，以跟踪哪个图表处于全屏模式。对我来说，这被定义为模块中所需的全局变量。
每当图表进入全屏模式时，将此变量更新为正确的图表ID。
如果图表未通过全屏测试，请检查其ID是否与进入全屏的图表相同。
- 如果是这样，请重置_fsChartID变量并执行所需的操作
- 否则，像往常一样返回false

请注意，我之所以简称为this.redraw（），是因为我的问题与退出全屏时图表无法正确重绘有关。

在Highcharts中捕获全屏逃生事件

2 个答案: