この記事では、Bootstrap開発中にタブが切り替わるチャート表示の問題を解決する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
レスポンシブ ページを作成する場合、多くの場合、より多くのサイズのデバイスのインターフェイスの互換性を考慮する必要があります。一般に、インターフェイス要素をカスタマイズできるように、ピクセルをハードコーディングすることはできません。デバイスのサイズに応じて調整されます。さまざまな動的調整が行われますが、タブの最初のページは正常に表示されますが、他のページを切り替えるときに表示内容が動的に調整されないなど、問題が発生することがあります。このエッセイは、タブのタブページを切り替えたときのチャート表示の問題を解決する方法と、チャート コントロールがウィンドウの動的な変更とサイズ変更を実現する方法を紹介します。 [関連する推奨事項: "bootstrap チュートリアル "]
たとえば、次のインターフェイスには 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 ドキュメント検索メソッドを使用できます。
//初始化对象
$(function () {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: "container1",
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
title: {
text: '集团分子公司人员组成'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
//showInLegend: true
}
},
series: [{
type: 'pie',
name: '人员数量',
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);
});//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('div.tab-char');
for (var i = 0; i < controls.length; i++) {
$(controls[i]).highcharts().reflow();
}
});<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>#または、ウィンドウが変わったときにキャプチャしたオブジェクトを確認することもできます。 
オブジェクトを取得した後、それを対応するコントロールに変換し、そのインターフェイスを呼び出して更新します。 
$(controls[i]).highcharts().reflow();
プログラミング関連の知識について詳しくは、
プログラミング入門
以上がBootstrap タブでタブを切り替えるときのチャート表示の問題の解決策についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
