Диаграмма CanvasJs не соответствует его контейнеру до изменения браузера

Question

Я пытаюсь со вчерашнего дня создать диаграмму с использованием Canvasjs, но когда страница загружена, диаграмма не соответствует ее контейнеру, пока я не изменю размер браузера. Я думаю, что проблема может быть в порядке различных файлов javascript, которые я использую, но я пробовал разными способами без успеха.

Вот файл AppAsset:

public $css = [ 
    'css/bootstrap.css', 
    'css/site.css', 
    'highlightJs/styles/magula.css', 
    'sweetAlert/sweetalert.css', 
    'chart/jquery-ui.min.css', 
]; 

public $js = [ 
    'highlightJs/highlight.pack.js', 
    'js/main.js', 
    'redactorPlugins/imagelink.js', 
    'sweetAlert/sweetalert.min.js', 
    'chart/jquery.canvasjs.min.js', 
    'chart/jquery-ui.min.js', 
]; 

public $depends = [ 
    'yii\web\YiiAsset', 
    'yii\bootstrap\BootstrapAsset', 
]; 

// render all the Javascripts files in the head of the page 
public $jsOptions = [ 
'position' => \yii\web\View::POS_HEAD 
]; 

Вот как я сделать диаграмму:

<script type="text/javascript"> 

$(function() { 

//Better to construct options first and then pass it as a parameter 
var options1 = { 
    title: { 
     text: "Your Profile's view of last week" 
    }, 
      animationEnabled: true, 
    data: [ 
    { 
    type: "spline", 
     dataPoints: [ 
      { label: "Monday", y: <?php echo $dataStatistics['viewProfileMondayLastWeek']; ?> }, 
      { label: "Tuesday", y: <?php echo $dataStatistics['viewProfileTuesdayLastWeek']; ?> }, 
      { label: "Wednesday", y: <?php echo $dataStatistics['viewProfileWednesdayLastWeek']; ?> }, 
      { label: "Thursday", y: <?php echo $dataStatistics['viewProfileThursdayLastWeek']; ?> }, 
      { label: "Friday", y: <?php echo $dataStatistics['viewProfileFridayLastWeek']; ?> }, 
      { label: "Saturday", y: <?php echo $dataStatistics['viewProfileSaturdayLastWeek']; ?> }, 
      { label: "Sunday", y: <?php echo $dataStatistics['viewProfileSundayLastWeek']; ?> } 
     ] 
    } 
    ], 
    axisX: { 
    labelFontSize: 16 
    }, 
    axisY: { 
    labelFontSize: 16 
    } 
}; 

$("#tabs").tabs({ 
    create: function (event, ui) { 
     //Render Charts after tabs have been created. 
     $("#chartContainer1").CanvasJSChart(options1); 
    }, 

    //**** I don t understand why this is not called during the page loading *****// 
    activate: function (event, ui) { 
     //Updates the chart to its container's size if it has changed. 
     ui.newPanel.children().first().CanvasJSChart().render(); 
    } 
}); 

}); 

</script> 



<div id="tabs" style="height: 315px"> 
<ul> 
    <li ><a href="#tabs-1" style="font-size: 12px">Last Week</a></li> 
</ul> 
<div id="tabs-1" style="height: 240px"> 
    <div id="chartContainer1" style="height: 240px; width: 100%;"></div> 
</div> 
</div> 

Здесь также порядок как JavaScript файлы называются:

Answer 1

CanvasJS Chart автоматически устанавливает высоту и ширину диаграммы в зависимости от размеров контейнера. Если значения для контейнера не установлены, они принимают значения по умолчанию.

В начальной загрузке, поскольку вкладка не показана первоначально, диаграмма принимает значения по умолчанию. Чтобы решить эту проблему, диаграмма должна отображаться, когда событие show.bs.tab запускается бутстрапом.

var chart = new CanvasJS.Chart("chartContainer", { 
 
     title:{ 
 
     \t text:"Chart 1" 
 
     }, 
 
     data: [ 
 
     { 
 
     type: "column", 
 
     dataPoints: [ 
 
     { x: 10, y: 71 }, 
 
     { x: 20, y: 55}, 
 
     { x: 30, y: 50 }, 
 
     { x: 40, y: 65 }, 
 
     { x: 50, y: 95 }, 
 
     { x: 60, y: 68 }, 
 
     { x: 70, y: 28 }, 
 
     { x: 80, y: 34 }, 
 
     { x: 90, y: 14} 
 
     ] 
 
     } 
 
     ] 
 
    }); 
 
    chart.render(); 
 

 
    function chartTab2() { 
 
    var chart1 = new CanvasJS.Chart("chartContainer1", { 
 
     title:{ 
 
     \t text:"Chart 2" 
 
     }, 
 
     data: [ 
 
     { 
 
     type: "column", 
 
     dataPoints: [ 
 
     { x: 10, y: 58 }, 
 
     { x: 20, y: 35}, 
 
     { x: 30, y: 36 }, 
 
     { x: 40, y: 75 }, 
 
     { x: 50, y: 45 }, 
 
     { x: 60, y: 28 }, 
 
     { x: 70, y: 48 }, 
 
     { x: 80, y: 14 }, 
 
     { x: 90, y: 54} 
 
     ] 
 
     } 
 
     ] 
 
    }); 
 
    chart1.render(); 
 
    } 
 

 
$('#bs-tab2').on("shown.bs.tab",function(){ 
 
     chartTab2(); 
 
     $('#bs-tab2').off(); // to remove the binded event after the initial rendering 
 
    }); 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> 
 
<div class="container"> 
 
    <div class="col-md-3"> 
 
     <ul class="nav nav-pills nav-jt"> 
 
      <li class="active"><a data-toggle="tab" href="#tab1">Chart 1</a></li> 
 
      <li><a data-toggle="tab" id= "bs-tab2" href="#tab2">Chart 2</a></li> 
 
     </ul> 
 
     <div class="tab-content"> 
 
      <div id="tab1" class="tab-pane fade active in"> 
 
       <div id="chartContainer" style="height: 260px; width: 100%;"></div> 
 
      </div> 
 
      <div id="tab2" class="tab-pane"> 
 
       <div id="chartContainer1" style=" height: 260px; width: 100%;"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>