Twitter bootstrap 3 bootstrap3nav中的谷歌图表

我有一个使用bootstrap 3导航选项卡的页面，在其中一个选项卡上，我有一个谷歌时间线图表，太靠左了。我已经尝试将chartArea.left选项设置为不同的值，但这似乎没有任何作用，也没有设置不同的宽度

var selectedLanguage='en'；
if（$（“#所选语言”）&&$（“#所选语言”）.val（）{
selectedLanguage=$（“#所选语言”）.val（）；
}
google.charts.load（'current'{
“包”：[“时间线”]，
“语言”：selectedLanguage
});
setOnLoadCallback（drawTimelineChart）；
函数drawTimelineChart（）{
//执行ajax调用以获取json
var json={
“时间线图”：[{
“rowLabel”：“委托”，
“barLabel”：“实际”，
“工具提示”：“，
“开始”：“2018-07-18T16:25:29”，
“结束”：“2018-07-20T10:48:42”
}, {
“rowLabel”：“预生产”，
“barLabel”：“实际”，
“工具提示”：“，
“开始”：“2018-07-20T10:48:42”，
“结束”：“2018-07-20T10:48:45”
}, {
“rowLabel”：“生产”，
“barLabel”：“实际”，
“工具提示”：“，
“开始”：“2018-07-20T10:48:45”，
“结束”：“2018-09-28014:08:03”
}, {
“rowLabel”：“预生产”，
“barLabel”：“实际”，
“工具提示”：“，
“开始”：“2018-07-20T10:48:45”，
“结束”：“2018-09-28512:22:05”
}, {
“rowLabel”：“生产”，
“barLabel”：“实际”，
“工具提示”：“，
“开始”：“2018-09-28512:22:05”，
“结束”：“2018-09-28014:08:03”
}]
};
setTimelineChartData（json）；
}
函数setTimelineChartData（jsonObj）{
if（jsonObj）{
var container=document.getElementById（'portfolio-time-management-chart'）；
var chart=newgoogle.visualization.Timeline（容器）；
var dataTable=new google.visualization.dataTable（）；
if（jsonObj&&jsonObj.timelineCharts）{
dataTable.addColumn({
键入：“字符串”，
id:“状态”
});
dataTable.addColumn({
键入：“字符串”，
id:“标签”
});
dataTable.addColumn({
键入：“字符串”，
角色：“工具提示”
});
dataTable.addColumn({
键入：“日期”，
id:“开始”
});
dataTable.addColumn({
键入：“日期”，
id:'结束'
});
var hasData=false；
$.each（jsonObj.timelineCharts，函数（索引，timelineChart）{
if（时间线图）{
var startDate=新日期（timelineChart.start）；
var endDate=新日期（timelineChart.end）；
dataTable.addRow(
[timelineChart.rowLabel、timelineChart.barLabel、timelineChart.barLabel、开始日期、结束日期]
);
hasData=true；
}
});
var windowHeight=$（window）.height（）*0.5；
var windowWidth=$（window）.width（）*0.7；
变量选项={
高度：窗高，
宽度：窗宽，
图表区：{
左：“30%”
}
};
if（hasData）{
图表绘制（数据表、选项）；
}
}
}
}

.panel.with-nav-tabs.panel-tab-block{
盒影：无；
-莫兹盒阴影：无；
-webkit盒阴影：无；
}
.带-nav-tabs.panel-tab-block.nav tabs>li>a，
.with-nav-tabs.panel-tab-block.nav-tabs>li>a：悬停，
.with-nav-tabs.panel-tab-block.nav-tabs>li>a：焦点{
颜色：#ffffff；
背景色：#999999；
}
.with-nav-tabs.panel-tab-block.nav-tabs>.open>a，
.with-nav-tabs.panel-tab-block.nav-tabs>.open>a:悬停，
.with-nav-tabs.panel-tab-block.nav-tabs>.open>a:focus，
.with-nav-tabs.panel-tab-block.nav-tabs>li>a：悬停，
.with-nav-tabs.panel-tab-block.nav-tabs>li>a：焦点{
颜色：#fff；
背景色：#666666；
}
.带-nav-tabs.panel-tab-block.nav tabs>li.active>a，
.with-nav-tabs.panel-tab-block.nav-tabs>li.active>a:悬停，
.with-nav-tabs.panel-tab-block.nav-tabs>li.active>a:focus{
颜色：#fff；
背景色：#2f70b1；
边框颜色：#2f70b1；
}
.with-nav-tabs.panel-tab-block.nav-tabs>li.dropdown.dropdown菜单{
背景色：#428bca；
边框颜色：#3071a9；
}
.with-nav-tabs.panel-tab-block.nav-tabs>li.dropdown.dropdown menu>li>a{
颜色：#fff；
}
.with-nav-tabs.panel-tab-block.nav-tabs>li.dropdown.dropdown menu>li>a:悬停，
.with-nav-tabs.panel-tab-block.nav-tabs>li.dropdown.dropdown menu>li>a:focus{
背景色：#3071a9；
}
.with-nav-tabs.panel-tab-block.nav-tabs>li.dropdown.dropdown menu>.active>a，
.with-nav-tabs.panel-tab-block.nav-tabs>li.dropdown.dropdown menu>.active>a:悬停，
.with-nav-tabs.panel-tab-block.nav-tabs>li.dropdown.dropdown menu>.active>a:focus{
背景色：#4a9fe9；
}
.列表组项目{
颜色：#000000；
背景色：#e4；
填充：0.5em；
溢出：自动；
边框：1px实心#1d3c5c；
}
.列表组项目标题{
背景色：#fff；
}
.列表组标签{
边缘底部：0px；
}
.垫片sml{
保证金：0；
填充：0；
高度：2米；
}

      $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
          switch ($(e.target).html()) {
            case 'Timeline Chart':
              drawTimelineChart();
              break;
          }
      });