Question

我可以将我的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>

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 个答案: