首页 文章

在调整窗口屏幕大小后,jQuery对话框中嵌入的HighChart的宽度仅为100%

提问于
浏览
0

我可以让我的HighChart图表显示在固定定位的jQuery对话框中,该宽度设置为百分比减去某些像素 .

但我的问题是,一旦我打开对话框,图表的宽度与我的对话框的宽度不同 . 只有在调整浏览器窗口大小后,图表才会获得与jQuery对话框窗口相同的宽度 .

在这里工作jsFiddle来表明我的意思 . 我怎么解决这个问题?

如果jsfiddle关闭,请参阅下面的“show code snippet”,但遗憾的是“运行代码片段”看起来不起作用(尽管代码与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>

1 回答

  • 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/

相关问题