Bootstrap タブでタブを切り替えるときのチャート表示の問題の解決策についての簡単な説明

この記事では、Bootstrap開発中にタブが切り替わるチャート表示の問題を解決する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

レスポンシブ ページを作成する場合、多くの場合、より多くのサイズのデバイスのインターフェイスの互換性を考慮する必要があります。一般に、インターフェイス要素をカスタマイズできるように、ピクセルをハードコーディングすることはできません。デバイスのサイズに応じて調整されます。さまざまな動的調整が行われますが、タブの最初のページは正常に表示されますが、他のページを切り替えるときに表示内容が動的に調整されないなど、問題が発生することがあります。このエッセイは、タブのタブページを切り替えたときのチャート表示の問題を解決する方法と、チャート コントロールがウィンドウの動的な変更とサイズ変更を実現する方法を紹介します。 [関連する推奨事項: "bootstrap チュートリアル "]

1. 従来のチャート処理

たとえば、次のインターフェイスには 2 つのタブがありますに示すように、最初のタブ ページは通常どおり表示されます。

インターフェイス コードの一部は次のとおりです

<div class="portlet-body">
    <div class="tab-char" id="lineContainer1" style="height:300px;max-width:500px;"></div>
</div>

iPhone に基づいてシミュレートされたデバイスのサイズを表示すると、画像が効果的に処理されていない ズームが正しく表示されます。つまり、タブを切り替えるときに、2 番目のタブ ページのグラフのサイズを正しく拡大縮小できません。

次に、タブが切り替えられたときに正しい効果を実現したい場合は、処理のためにタブ切り替えイベントを追跡する必要があります。

インターネットで解決策を探したところ、「ブートストラップ タブ ページ (タブ) プラグインの切り替え時に Echarts が表示されない問題を解決する」というエッセイの 1 つで、非常に良いアイデアが紹介されていました。

ただし、私はいくつかの統合と変換を行い、実際に彼が言及したいくつかの重要な点を達成しましたが、より単純化されました:

1. ブートストラップは応答性の高いレイアウトを実装します
2. Highcharts は自己適応を実現します
# 3. タブ切り替えやズームは正常に表示されます #ここでは HighChart チャート コントロールを使用していますが、原理は同様に、チャート コレクションに対してトラバーサル プロセスを実行する必要がありますが、トラバーサル プロセスではより便利な JQuery ドキュメント検索メソッドを使用できます。

2. タブ切り替え時のチャート表示の問題を解決する

たとえば、チャート宣言とチャートデータを動的に取得するコードは次のとおりです。 #

//初始化对象
    $(function () {
        var chart1 = new Highcharts.Chart({
            chart: {
                renderTo: "container1",
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
            },
            title: {
                text: '集团分子公司人员组成'
            },
            tooltip: {
                pointFormat: &#39;{series.name}: <b>{point.y}</b>&#39;
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: &#39;pointer&#39;,
                    dataLabels: {
                        enabled: true,
                        format: &#39;<b>{point.name}</b>: {point.percentage:.1f} %&#39;,
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || &#39;black&#39;
                        }

                    },
                    //showInLegend: true
                }
            },
            series: [{
                type: &#39;pie&#39;,
                name: &#39;人员数量&#39;,
                data: []
            }]
        });

        //通过Ajax获取图表1数据
        $.ajaxSettings.async = false;
        var data1 = [];
        $.getJSON("/User/GetCompanyUserCountJson", function (dict) {                
            for (var key in dict) {
                if (dict.hasOwnProperty(key)) {
                    data1.push([key, dict[key]]);
                }
            };
            chart1.series[0].setData(data1);
        });

この部分は単なる参考であり、実際に機能するのはこれらのコードではありません。

実際に機能するのは、以下に示すように、Boosttrap のタブ変更イベントを使用して処理することです。

//TAB页面变化的时候，调整图表宽度
        $('.grid_tab').on('shown.bs.tab', function () {
            var target = $(this).attr('href');
            var controls = $(target).find('.tab-char');
            for(var i=0;i<controls.length; i++)
            {
                $(controls[i]).highcharts().reflow();
            }            
        });

        //窗口大小变化的时候，调整图表宽度
        $(window).resize(function () {
            var controls = $(document).find(&#39;div.tab-char&#39;);
            for (var i = 0; i < controls.length; i++) {
                $(controls[i]).highcharts().reflow();
            }
        });

上記の JS は、JQuery を使用して対応する highcharts オブジェクトを動的に走査し、その .reflow() 関数を呼び出して更新します。

以下のチャートのタブ タブ ページの HTML コードを参照すると、class="tab-pane" と class="tab-char" の 2 つの p レイヤーがあることがわかります。これらは 2 つの p レイヤーです。 JQuery を使用してチャートを動的に検索し、キーを制御および処理します。

<div class="tab-pane fade active in" id="tab_2_1">
                <div class="row">
                    <div class="col-md-6 col-sm-6">
                        <div class="portlet light ">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="icon-bar-chart font-green-sharp hide"></i>
                                    <span class="caption-subject font-green-sharp bold uppercase">图表1</span>
                                </div>
                                <div class="actions">
                                    <div class="btn-group btn-group-devided" data-toggle="buttons">
                                        <label class="btn btn-transparent purple btn-circle btn-sm active">
                                        <input type="radio" name="options" class="toggle" id="option1">更多...</label>
                                    </div>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <div class="tab-char" id="container1" style="height: 300px;max-width:500px"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <div class="portlet light ">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="icon-bar-chart font-green-sharp hide"></i>
                                    <span class="caption-subject font-green-sharp bold uppercase">3D图表2</span>
                                </div>
                                <div class="actions">
                                    <div class="btn-group btn-group-devided" data-toggle="buttons">
                                        <label class="btn btn-transparent purple btn-circle btn-sm active">
                                            <input type="radio" name="options" class="toggle" id="option1">更多...
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="portlet-body">                                
                                <div class="tab-char" id="container2" style="height: 300px;max-width:500px"></div>
                            </div>
                        </div>
                    </div>

jS の処理時に関数が正しく実行されているかどうかを判断できない場合は、関数を追跡して対応するオブジェクトを取得できます。以下は Chrome で追跡した結果であり、関数の各ステップを追跡できます。道。

#または、ウィンドウが変わったときにキャプチャしたオブジェクトを確認することもできます。

オブジェクトを取得した後、それを対応するコントロールに変換し、そのインターフェイスを呼び出して更新します。

$(controls[i]).highcharts().reflow();

上記は実装アイデアと追跡処理方法であり、最後に、上の図は問題の解決策を示しています。

プログラミング関連の知識について詳しくは、プログラミング入門

をご覧ください。 ！

以上がBootstrap タブでタブを切り替えるときのチャート表示の問題の解決策についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。