フルスクリーンイベントをハイチャートに追加するにはどうすればよいですか？

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(); 
    }); 
}); 

そして、フルスクリーンオプションは、チャートメニューに追加されます：私は、拡張highchartsを試してみた

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); 

チャートが正しく全画面表示になりますが、それがないとき、私はそれをリフローして塗りつぶします利用可能なエリア。ただし、チャートに添付されている全画面イベントには当てられません。私はそれをグラフとグラフコンテナの両方につけてみました。私はブラウザ固有のフルスクリーンイベントのバリエーションの1つだけを試みました。代わりに「クリック」を使用すると、イベントコールバックがトリガーされます。

また、launchIntoFullScreen関数でリフローを試みましたが、グラフはグローバル変数にしても機能しません。

フルスクリーンで新しいディメンション情報が再表示されることはありませんが、わかりません。私はChromeを使用しています。

Answer 1

アイコンを作成してクリック機能をバインドします。 は、クラスを作成し、クリック時にチャートコンテナにこのクラスを追加し、 は

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

} 

トップ画像z-indexが、この機能を実行します

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

仕事をするべきです。 .reflow()は、divコンテナがフルスクリーンになるとグラフを更新します

また、チャート機能にもクリック機能をバインドすることができます。

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