Bootstrap 3 Nav 中的 Google Chart [英] Google Chart within Bootstrap 3 Nav
本文介绍了Bootstrap 3 Nav 中的 Google Chart的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个使用 bootstrap 3 导航标签的页面，在其中一个标签上，我有一个离左边太远的谷歌时间线图表.我尝试将 chartArea.left 选项设置为不同的值，但这似乎没有任何作用，也设置了不同的宽度.
var selectedLanguage = 'en';if ($("#selected-language") && $("#selected-language").val()) {selectedLanguage = $("#selected-language").val();}google.charts.load('当前', {'包裹':['时间线']，'语言':selectedLanguage});google.charts.setOnLoadCallback(drawTimelineChart);函数 drawTimelineChart() {//调用ajax获取jsonvar 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-28T14:08:03"}, {"rowLabel": "预生产","barLabel": "实际","工具提示": "","开始": "2018-07-20T10:48:45",结束":2018-09-28T12:22:05"}, {"rowLabel": "生产","barLabel": "实际","工具提示": "","开始": "2018-09-28T12:22:05",结束":2018-09-28T14:08:03"}]};设置时间线图表数据(json)；}函数 setTimelineChartData(jsonObj) {如果(jsonObj){var container = document.getElementById('portfolio-time-management-chart');var chart = new google.visualization.Timeline(container);var dataTable = new google.visualization.DataTable();如果(jsonObj && jsonObj.timelineCharts){数据表.addColumn({类型:'字符串'，id:'状态'});数据表.addColumn({类型:'字符串'，id:'标签'});数据表.addColumn({类型:'字符串'，角色:'工具提示'});数据表.addColumn({类型:'日期'，id:'开始'});数据表.addColumn({类型:'日期'，id:'结束'});var hasData = false;$.each(jsonObj.timelineCharts, function(index,timelineChart) {如果(时间线图表){var startDate = new Date(timelineChart.start);var endDate = new Date(timelineChart.end);数据表.addRow([timelineChart.rowLabel、timelineChart.barLabel、timelineChart.barLabel、startDate、endDate]);hasData = true;}});var windowHeight = $(window).height() * 0.5;var windowWidth = $(window).width() * 0.7;变量选项 = {高度:窗口高度，宽度:窗口宽度，图表区域:{左:'30%'}};如果(hasData){图表绘制(数据表，选项)；}}}}.panel.with-nav-tabs.panel-tab-block {框阴影:无；-moz-box-shadow:无；-webkit-box-shadow:无；}.with-nav-tabs.panel-tab-block .nav-tabs>li>a,.with-nav-tabs.panel-tab-block .nav-tabs>li>a:hover,.with-nav-tabs.panel-tab-block .nav-tabs>li>a:focus {颜色:#ffffff；背景色:#999999；}.with-nav-tabs.panel-tab-block .nav-tabs>.open>a,.with-nav-tabs.panel-tab-block .nav-tabs>.open>a:hover,.with-nav-tabs.panel-tab-block .nav-tabs>.open>a:focus,.with-nav-tabs.panel-tab-block .nav-tabs>li>a:hover,.with-nav-tabs.panel-tab-block .nav-tabs>li>a:focus {颜色:#fff;背景色:#666666；}.with-nav-tabs.panel-tab-block .nav-tabs>li.active>a,.with-nav-tabs.panel-tab-block .nav-tabs>li.active>a:hover,.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-menu {背景颜色:#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:hover,.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:hover,.with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu>.active>a:focus {背景颜色:#4a9fe9；}.list-group-item {颜色:#000000；背景颜色:#e4e4e4；填充:0.5em；溢出:自动；边框:1px 实心 #1d3c5c；}.list-group-item-title {背景色:#fff;}.list-group 标签 {底边距:0px；}.spacer-sml {边距:0；填充:0；高度:2em；}<script src="https://code.jquery.com/jquery-3.3.1.min.js"><;/脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script><script src="https://www.gstatic.com/charts/loader.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><div class="container-fluidportfolio-overview-container"><div class="col-sm-2"><div class="row"><ul class="list-group"><li class="list-group-item list-group-item-title text-center "><label class="portfolio-details">Side Details...</label><li class="list-group-item list-group-item-title text-center "><label class="portfolio-details"></label><li class="list-group-item list-group-item-title text-center "><label class="portfolio-details"></label><li class="list-group-item list-group-item-title text-center "><label class="portfolio-details"></label><li class="list-group-item list-group-item-title text-center "><label class="portfolio-details"></label><div class="col-sm-10"><div class="panel with-nav-tabs panel-tab-block"><div class="panel-heading"><ul class="nav nav-tabs"><li class="active"><a data-toggle="tab" role="tab" class="" href="#portfolio-projects-tab">项目</a></li><li><a data-toggle="tab" role="tab" class="" href="#portfolio-time-management-tab">时间线图</a></li>
<div class="panel-body"><div class="tab-content"><div id="portfolio-projects-tab" class="tab-pane 淡入活跃"><div class="tab-block-content"><div class="row"><div class="col-sm-12"><div class="spacer-sml"></div>
<div class="col-sm-12"><h1>默认情况下加载的项目选项卡，但问题是时间线图表选项卡图表被隐藏
