11

タブ付きのTwitterブートストラップを使用しています。各タブ内に複数のタブとチャートがあります。ブラウザのサイズを変更すると、現在アクティブなタブにないグラフのサイズは変更されません。実際、細いバーでちょっとおかしいように見えます。現在アクティブなタブは正常に機能します。誰かがこの問題を見たことがあり、回避策はありますか？

4

9 に答える 9

23

これが実際の例です：

http://codepen.io/colinsteinmann/pen/BlGfE

基本的に、タブがクリックされると、各チャートで .reflow() 関数が呼び出されます。そうすれば、コンテナが表示されるときにコンテナに適用される新しいディメンションに基づいてチャートが再描画されます。

これは、コードの最も重要なスニペットです。

// fix dimensions of chart that was in a hidden element
jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) { // on tab selection event
    jQuery( ".contains-chart" ).each(function() { // target each element with the .contains-chart class
        var chart = jQuery(this).highcharts(); // target the chart itself
        chart.reflow() // reflow that chart
    });
})
于 2014-10-10T21:16:18.363 に答える
2

class="chart"タブ内のすべてのハイチャート コンテナーに追加します。

この jQuery コードを追加します。

jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function () { 
    $( '.chart' ).each(function() { 
        $(this).highcharts().reflow();
    });
})
于 2016-06-03T20:56:23.420 に答える
2

しばらく探して答えを見つけました。これは私を夢中にさせていたので、ここで何もうまくいかなかったので、皆さんと共有したいと思います.

これを CSS に追加します

.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: block;     
    height: 0;          
    overflow-y: hidden; 
}

.tab-content > .active,
.pill-content > .active {
    height: auto;       
}

詳細については、 https://jonpolygon.com/bootstrap-tabs-100-percent-width-charts/で解決策を見つけたページをご覧ください。

于 2017-09-06T21:50:27.650 に答える
0

私は2つのタブを持っていますが、同じ問題に遭遇しました。Druska の行コードを 2 つだけ変更したところ、機能しました。

function anyname() {
$("[data-highcharts-chart]").each(function () {
var highChart = Highcharts.charts[$(this).data('highchartsChart')];
var highChartCont = $(highChart.container).parent();
highChart.reflow();

});

}

以下のようなHTMLタブコードにonclickイベントを1つ追加します。

   <input type="radio" id="tab1_1" checked  onclick="anyname();" >
于 2019-05-07T01:16:38.547 に答える
0

これは少し古いですが、これに出くわした人にとっては、ブートストラップのタブ付き表示でハイチャートのサイズが正しくないという同様の問題がありました。私が思いついた解決策は、setTimeout() を使用してチャートの作成を 100 ミリ秒遅らせることでした。

setTimeout(function() {
    drawBarChart();
}, 100);

注: drawBarChart は、必要なグラフを生成するために作成したカスタム関数です。問題 (少なくとも私の場合) は、グラフがコンテナーとして作成される前 (または同時に) 作成されたため、コンテナーの幅ではなくデフォルトの幅を選択していたようです。

于 2017-04-06T11:53:38.127 に答える