Javascript CanvasJs图表don'；在浏览器调整大小之前，不要安装其容器

我从昨天开始尝试使用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>

$（函数（）{
//最好先构造选项，然后将其作为参数传递
变量选项1={
标题：{
文字：“您上周的个人资料视图”
},
animationEnabled：没错，
数据：[
{
类型：“样条曲线”，
数据点：[
{标签：“星期一”，y:}，
{标签：“星期二”，y:}，
{标签：“星期三”，y:}，
{标签：“星期四”，y:}，
{标签：“星期五”，y:}，
{标签：“星期六”，y:}，
{标签：“星期日”，y:}
]
}
],
axisX：{
labelFontSize:16
},
axisY：{
labelFontSize:16
}
};
$（“#制表符”）。制表符({
创建：函数（事件、用户界面）{
//创建选项卡后渲染图表。
$（“chartContainer1”）。CanvasJSChart（选项1）；
},
//****我不明白为什么在页面加载期间不调用它*****//
激活：功能（事件、用户界面）{
//如果图表已更改，则将其更新为其容器大小。
ui.newPanel.children（）.first（）.CanvasJSChart（）.render（）；
}
});
});

以下是javascript文件的调用顺序：

---

CanvasJS图表根据容器的尺寸自动设置图表的高度和宽度。如果未为容器设置值，则将采用默认值

在bootstrap中，由于选项卡最初未显示，所以图表采用默认值。要解决此问题，应在引导程序触发Showed.bs.tab事件时呈现图表

var chart=new CanvasJS.chart（“chartContainer”{
标题：{
正文：“图表1”
},  
数据：[
{
键入：“列”，
数据点：[
{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（）；
函数chartTab2（）{
var chart1=新建CanvasJS.Chart（“chartContainer1”{
标题：{
正文：“图2”
},
数据：[
{
键入：“列”，
数据点：[
{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}
]
}
]
});
图1.render（）；
}
$（'#bs-tab2'）。on（“show.bs.tab”，function（））{
chartTab2（）；
$（'#bs-tab2'）.off（）；//在初始渲染后删除绑定事件
});

CanvasJS图表根据容器的尺寸自动设置图表的高度和宽度。如果未为容器设置值，则将采用默认值

在bootstrap中，由于选项卡最初未显示，所以图表采用默认值。要解决此问题，应在引导程序触发Showed.bs.tab事件时呈现图表

var chart=new CanvasJS.chart（“chartContainer”{
标题：{
正文：“图表1”
},  
数据：[
{
键入：“列”，
数据点：[
{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（）；
函数chartTab2（）{
var chart1=新建CanvasJS.Chart（“chartContainer1”{
标题：{
正文：“图2”
},
数据：[
{
键入：“列”，
数据点：[
{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}
]
}
]
});
图1.render（）；
}
$（'#bs-tab2'）。on（“show.bs.tab”，function（））{
chartTab2（）；
$（'#bs-tab2'）.off（）；//在初始渲染后删除绑定事件
});