Question

我一直试图将全屏事件添加到高清图表中但没有成功。我试过扩展高级图表：

Highcharts.Chart.prototype.callbacks.push(function (chart) {
   Highcharts.addEvent(chart.container, 'webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function (e) {
       console.log('in fullscreen nonsense');
       this.reflow();
   });
});

图表菜单中添加了全屏选项：

var fullscreen = {
    text: 'Toggle full screen. ESC to exit',
    onclick: function () {
        function launchIntoFullscreen(element) {
            var parentEl = element.renderTo;
            if(parentEl.requestFullscreen) {
                parentEl.requestFullscreen();
            } else if(parentEl.mozRequestFullScreen) {
                parentEl.mozRequestFullScreen();
            } else if(parentEl.webkitRequestFullscreen) {
                parentEl.webkitRequestFullscreen();
            } else if(parentEl.msRequestFullscreen) {
                parentEl.msRequestFullscreen();
            }
        }
        launchIntoFullscreen(this);
    }
};
Highcharts.getOptions()
          .exporting.buttons.contextButton.menuItems.push(fullscreen);

图表正确地全屏显示，但是当它完成时我希望它重排并填充可用区域。但是，它没有达到附加到图表的全屏事件。我已经尝试将它附加到图表和图表容器中。我尝试过一种特定于浏览器的全屏事件。当我使用＆＃39;点击＆＃39;相反，触发事件回调。

我还尝试在launchIntoFullScreen函数中进行回流，但这也不起作用（即使我将图表设为全局变量）。

全屏无法为回流提供新尺寸信息，但我不确定。我使用的是Chrome。

Answer 1

在当前版本的Highcharts（8.1.0）中，可以使用ax = for_plotting.dropna().plot(column='Confirmed', cmap = 'YlOrRd', figsize=(15,9), scheme='quantiles', k=5, legend = True)函数来完成此操作。

高图在jsfiddle上有一个示例。发生故障的代码：

chart.fullscreen.toggle()

Answer 2

创建一个图标并将点击功能绑定到它。创建一个类，然后单击将此类添加到图表容器中，使图像z-index顶部

.modal {
    position: fixed;
    width: 1000px;
    height: 485px !important;
    top: 0px;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
}
.modal  #moodcontainer{
    height: 485px;

}

然后运行此功能：

$(function(){
$("#ExpandIcon").click(function() {
        $("#moodcontainer").toggleClass('modal');
        $("#moodcontainer").highcharts().reflow();
    });
});

应该做的工作。一旦div容器获得全屏

，.reflow()将刷新图表

您也可以将点击功能绑定到图表主体。

$('.chart-container').bind('mousedown', function () {
        $(this).toggleClass('modal');
        $('.chart', this).highcharts().reflow();
    });

如何将全屏事件添加到Highchart？

2 个答案: