調整窗口大小后，jQuery對話框中嵌入式HighChart的寬度僅100％

Question

我可以使我的HighChart圖表出現在固定位置的jQuery對話框中，該對話框的寬度設置為百分比減去某些像素。

但是我的問題是，一旦打開對話框，圖表的寬度將與對話框的寬度不同。 只有在調整瀏覽器窗口的大小之后，圖表的寬度才與jQuery對話框的寬度相同。

這是一個工作的jsFiddle，以顯示我的意思。 我該如何解決？

如果jsfiddle出現故障，請參見下面的“顯示代碼段”，但是不幸的是，“運行代碼段”沒有起作用（盡管代碼與jsfiddle相同）。

 $('.selector').dialog({ dialogClass: 'fixed-dialog', resizable: false, autoOpen: false, modal: false, clickOut: true }); $("#opener").click(function() { $(".selector").dialog("open"); }); $(function() { var chart = new Highcharts.Chart({ chart: { renderTo: 'stock-chart', margin: 0, defaultSeriesType: 'areaspline' }, xAxis: { minPadding: 0, maxPadding: 0 }, series: [{ data: [33, 4, 15, 6, 7, 8, 73, 2, 33, 4, 25], marker: { enabled: false } }] }); });

 .fixed-dialog { position: fixed !important; top: 50px !important; left: 50px !important; width: calc(90% - 50px) !important; }

 <head> <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <script src="https://raw.githubusercontent.com/jasonday/jQuery-UI-Dialog-extended/master/jquery.dialogOptions.js"></script> <script src="http://code.highcharts.com/stock/highstock.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <p/> <div class="selector" title="Dialog Title"> <div id="stock-chart" style="calc(90% - 50px) !important; "></div> </div> <button id="opener">Open Dialog</button> </body>

Answer 1

在隱藏的容器中呈現圖表時，這是一個已知的問題。 瀏覽器無法計算寬度，因此圖表使用圖表的默認寬度/高度值。

解決方法很簡單：打開對話框時更新圖表的寬度/高度。

$('.selector').dialog({
  dialogClass: 'fixed-dialog',
  resizable: false,
  autoOpen: false,
  modal: false,
  clickOut: true,
  open: function(){
    var chart = $("#stock-chart").highcharts();
    if(chart) {
      chart.reflow();
    }
  }
});

和演示： http : //jsfiddle.net/63oa26ah/6/

調整窗口大小后，jQuery對話框中嵌入式HighChart的寬度僅100％

問題描述

1 個解決方案

解決方案1
1 已采納 2015-07-01 11:12:38

調整窗口大小后，jQuery對話框中嵌入式HighChart的寬度僅100％

問題描述

1 個解決方案

解決方案1 1 已采納 2015-07-01 11:12:38

解決方案1
1 已采納 2015-07-01 11:12:38