php - jquery翻转！组件：highchart 不再是交互式的？

Question

我有一个包含表格和显示一些值的高图的页面。使用翻转！组件我试图在两个对象之间切换，但是当我这样做时，highchart 失去了它的所有交互性（工具提示不再显示，缩放选项不起作用等等）。有没有人已经遇到过这个问题并且知道如何解决它？

这里有一些html：

这是一个按钮

<span id="button"> button </span>

这是翻转：

<div id="flip">here is my flip container</div>

这是包含对象的 div

<div style="display: none">
   <table id="table"> some values </table>
   <div id="chart">Highchart</div>
</div>

这是我切换的方式：

$('#button').button().click(function(){
    $('#flip').flip({
        direction: 'bt',
        content:$('#chart'),
        color: 'white',
        speed: 200
        });
});

Answer 1

我认为这里的问题是图表是在容器不可见时绘制的。在容器可见后尝试绘制图表。将 Highchart 放在一个函数中，然后在翻转转换时调用它，或者预定义 highchart 变量，然后在翻转命令之后立即运行 highcharts jQuery 代码（可能带有回调？）

我不确定这个翻转插件，但也许下面的代码可以解决问题......

$('#button').button().click(function(){
  $('#flip').flip({
    direction: 'bt',
    content:$('#chart'),
    color: 'white',
    speed: 200
  }).each( function() { drawChart(); });
});

function drawChart() {
// draw the chart here
}