1

テーブルといくつかの値を表示するハイチャートを含むページがあります。フリップを使おう！コンポーネント 2 つのオブジェクトを切り替えようとしていますが、そうすると、ハイチャートの対話性がすべて失われます (ツールチップが表示されなくなり、ズーム オプションが機能しなくなります)。誰かがすでにこの問題に直面していて、それを解決する方法を知っていますか?

ここにいくつかの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
        });
});
4

1 に答える 1

0

ここでの問題は、コンテナーが表示されていないときにチャートが描画されることだと思います。コンテナーが表示されたら、グラフを描画してみてください。Highchart を関数に入れ、フリップ遷移でそれを呼び出すか、highchart 変数を事前に定義して、flip コマンドの直後に 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
}
于 2013-05-27T15:38:32.513 に答える