When doing the responsive page, often need to consider more size equipment interface compatibility, generally can’t write dead pixels, so that you can make an interface element can carry on the dynamic adjustment depending on the equipment, but sometimes or often encounter some problems, such as the Tab label, according to the first page is normal but when switching to other pages display content not to have the dynamic adjustment, This article introduces how to solve the problem of tab-tab page switching chart display, and chart control can realize dynamic change of the window to adjust the size.

1) Routine chart processing

For example, if two tabs are displayed, the first Tab is displayed normally.

Part of the interface code is shown below

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

If we look at the IPhone analog device size, we will find that the image is not properly scaled, i.e. the chart on the second Tab page is not properly scaled when the Tab page is switched.

So if we want to achieve the correct effect when the TAB page is switched, we need to track the TAB page switching event for processing.

I searched the Internet for a solution, including an article on how to solve the problem of switching the Bootstrap Tab plugin to Echarts without displaying.

However, I made some amalgamations that actually fulfilled some of his points, but simplified them:

1. Bootstrap to achieve responsive layout 2. Highcharts to achieve adaptive 3. TAB page switching and zooming are displayed normally

I’m using the HighChart chart control here, but the principle is the same, we need to do a traversal of the chart collection, but traversal can be done using a more convenient JQuery document lookup method.

 

2. Solve the problem of Tab Tab page switching chart display

For example, my chart declaration and the code for dynamically retrieving chart data look like this:

$(function () {var chart1 = new highchart.chart ({Chart: {renderTo: "container1", plotBackgroundColor: Null, plotBorderWidth: NULL, plotShadow: false,}, title: {text: 'Group member company personnel composition'}, 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 ', data: []}]}); $.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); });Copy the code

For reference, it’s not the code that really matters.

What really works is that we handle the Tab change event with Boostrap, as shown below.

$('.grid_tab'). On ('shown. Bs.tab ', function () {var target = $(this). 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(); }});Copy the code

The above section of JS uses JQuery to dynamically iterate through the corresponding HighCharts object and then call its.reflow() function to update it.

Looking at the HTML code for the Tab Tab of the chart, we note that the DIV layers of class=”tab-pane “and class=”tab-char” are key to dynamically finding and processing the chart control using 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"> figure 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 graphics 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>Copy the code

If we’re dealing with jS and we’re not sure if it’s working correctly, we can trace the function, and we can track the corresponding object. Here’s what I did in Chrome to track the result, and we can track every step.

Or we can look at window changes when we capture the object.

Once we get the object, we convert it to the corresponding control and then call its interface to update it.

$(controls[i]).highcharts().reflow();Copy the code

The above is the idea of our implementation and tracking processing methods, the last figure illustrates the problem solved.

 

 





Winform/hybrid development framework
Web Development Framework
Bootstrap development framework
Research and application of wechat portal development framework







www.iqidi.com