web-dev-qa-db-ja.com

ハイチャート-非表示のグラフのサイズが適切に変更されない

現在、3つのタブ付きページがあります。各タブは、選択されていない場合はdisplay: hiddenに設定されるdivです。これらのタブには、Susy（コンパスプラグイン）で作成されたグリッドシステムがあります。また、各タブページには一連のハイチャートがあります。ページをロードすると、UR1にあるタブに応じて、タブの1つがロードされます。すべてのグラフは問題なく表示されますが、別のタブに切り替えると、一部のグラフがdivに正しく収まりません。ウィンドウのサイズを変更するだけで、グラフが再計算され、完全にフィットします。または、同じタブをリロードすると、グラフもうまく収まります。 タブを切り替えたときにページ上のすべてのグラフのサイズを変更する関数を呼び出すことはできますか？

次のようになります。 How it looks

次のようになります。 How it should look

編集：これはハイチャートに直接関連する問題ではないようです、例えば私のグーグルマップは次のようになります： How Google Maps looks

しかし、ウィンドウのサイズを変更すると、正しく調整されます。 How Google Maps looks after resize

タブが切り替わったときにJSの関数呼び出しを介してCSSでグリッドを更新/調整できますか？

highchartssusy-compass
23
thegreyspot

私のために働いたのは電話です：

$(window).resize();

新しいタブをロードするとき。 Google Maps APIにはまだ問題がありますが、Highchartsではうまく機能します。

46
thegreyspot

「display：none」を使用して開始するものをレンダリングしようとすると、多くの問題が発生します。 $（window）.resize（）は多くの場合機能する可能性がありますが、表示する前に最初にページをレンダリングすることをお勧めします。何も有効になりません。考えられる解決策は、不透明度：0または可視性：非表示を設定することです。

Display属性は、要素のレンダリング方法を制御するものです。たとえば、ブロック（100％幅）やインライン（コンテンツに合わせる）などです。要素にdisplay：noneがある場合、これをオーバーライドし、最終的に、その要素がブロックタイプを受け取るまで、その有効な幅と高さを削除します。

次に示す例を示します。 http://jsfiddle.net/m2f3scmm/3/

<div id="log1" style="display: none;">
</div>
<div id="log2" style="visibility: hidden;">
</div>
<div id="log3" style="opacity: 0">
</div>

「サイズ変更」ハックを使用している場合、使用しているプラ​​グインまたはスクリプトがウィンドウのサイズ変更イベントにバインドされていると想定していますが、常にそうであるとは限りません。 window.resizeをトリガーすると、レンダリングが遅くなったり、望ましくない効果が発生したりする可能性もあります（たとえば、最初のレンダリング時に小さなアニメーションのハイチャートが実行します。タブが変更されるたびに発生すると、見栄えが悪くなります）。

6
tribe84
/**
 * Adjust size for hidden charts
 * @param chart highcharts
 */
function adjustGraph(chart) {
    try {
        if (typeof (chart === 'undefined' || chart === null) && this instanceof jQuery) { // if no obj chart and the context is set
            this.find('.chart-container:visible').each(function () { // for only visible charts container in the curent context
                $container = $(this); // context container
                $container.find('div[id^="chart-"]').each(function () { // for only chart
                    $chart = $(this).highcharts(); // cast from JQuery to highcharts obj
                    $chart.setSize($container.width(), $chart.chartHeight, doAnimation = true); // adjust chart size with animation transition
                });
            });
        } else {
            chart.setSize($('.chart-container:visible').width(), chart.chartHeight, doAnimation = true); // if chart is set, adjust
        }
    }
    catch (err) {
        // do nothing
    }
}

使用法

$(window).resize(function () {
        if (this.resizeTO) clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function () {
            // resizeEnd call function with pass context body
            adjustGraph.call($('body'));

        }, 500);
    });

for bootstrap tab

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            var isChart = $(this).attr('data-chart');
            var target = $(this).attr('href');
            if (isChart) {
                // call functio inside context target
                adjustGraph.call($(target));
            }
        });



  <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active">
            <a href="#anagrafica" data-toggle="tab"><h5>Anagrafica</h5></a>
        </li>
        <li>
            <a href="#consumi" data-toggle="tab" data-chart="1"><h5>Consumi</h5></a>
        </li>
    </ul>

チャート上

new Highcharts.Chart({
            chart: {
                renderTo: 'chart-bar',
                defaultSeriesType: 'column',
                zoomType: 'xy',
                backgroundColor: null,
                events: {
                    load: function (event) {
                        adjustGraph(this);
                    }
                }
            },

htmlコード

div class="tab-pane" id="charts">
    <div class="row-fluid">
        <div class="span6 offset3">
            <div id="myCarousel" class="carousel slide">
                <!-- Carousel items -->
                <div class="carousel-inner chart-container">
                    <div class="active item">
                        <h3>Chart 1/h3>
                        <div id="bar-pod-annuale">
                           <div id="chart-bar" style="width:100%;margin: 0 auto"></div>
                        </div>
                    </div>
                    <div class="item">
                        <h3>Char 2</h3>
                        /** chart **/
                    </div>
                    <div class="item">
                        <h3>Char 3</h3>
                        /** chart **/
                    </div>
                </div>
                <!-- Carousel nav -->
                <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
            </div>
        </div>
    </div>

jsfiddleを参照 http://jsfiddle.net/davide_vallicella/LuxFd/2/

3
Davide