我使用引导3个导航选项卡有一个页面和标签之一，我有一个谷歌的时间表图表太远左侧。 我曾尝试设置chartArea.left选项为不同的值，但似乎并没有做任何事情，以及设置不同的宽度。
var selectedLanguage = 'en'; if ($("#selected-language") && $("#selected-language").val()) { selectedLanguage = $("#selected-language").val(); } google.charts.load('current', { 'packages': ['timeline'], 'language': selectedLanguage }); google.charts.setOnLoadCallback(drawTimelineChart); function drawTimelineChart() { //Do ajax call to get json var json = { "timelineCharts": [{ "rowLabel": "Commissioned", "barLabel": "Actual", "tooltip": "", "start": "2018-07-18T16:25:29", "end": "2018-07-20T10:48:42" }, { "rowLabel": "Pre-Production", "barLabel": "Actual", "tooltip": "", "start": "2018-07-20T10:48:42", "end": "2018-07-20T10:48:45" }, { "rowLabel": "Production", "barLabel": "Actual", "tooltip": "", "start": "2018-07-20T10:48:45", "end": "2018-09-28T14:08:03" }, { "rowLabel": "Pre-Production", "barLabel": "Actual", "tooltip": "", "start": "2018-07-20T10:48:45", "end": "2018-09-28T12:22:05" }, { "rowLabel": "Production", "barLabel": "Actual", "tooltip": "", "start": "2018-09-28T12:22:05", "end": "2018-09-28T14:08:03" }] }; setTimelineChartData(json); } function setTimelineChartData(jsonObj) { if (jsonObj) { var container = document.getElementById('portfolio-time-management-chart'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); if (jsonObj && jsonObj.timelineCharts) { dataTable.addColumn({ type: 'string', id: 'Status' }); dataTable.addColumn({ type: 'string', id: 'Label' }); dataTable.addColumn({ type: 'string', role: 'Tooltip' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); var hasData = false; $.each(jsonObj.timelineCharts, function(index, timelineChart) { if (timelineChart) { var startDate = new Date(timelineChart.start); var endDate = new Date(timelineChart.end); dataTable.addRow( [timelineChart.rowLabel, timelineChart.barLabel, timelineChart.barLabel, startDate, endDate] ); hasData = true; } }); var windowHeight = $(window).height() * 0.5; var windowWidth = $(window).width() * 0.7; var options = { height: windowHeight, width: windowWidth, chartArea: { left: '30%' } }; if (hasData) { chart.draw(dataTable, options); } } } } .panel.with-nav-tabs.panel-tab-block { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .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 { color: #ffffff; background-color: #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 { color: #fff; background-color: #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 { color: #fff; background-color: #2f70b1; border-color: #2f70b1; } .with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu { background-color: #428bca; border-color: #3071a9; } .with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu>li>a { color: #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 { background-color: #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 { background-color: #4a9fe9; } .list-group-item { color: #000000; background-color: #e4e4e4; padding: 0.5em; overflow: auto; border: 1px solid #1d3c5c; } .list-group-item-title { background-color: #fff; } .list-group label { margin-bottom: 0px; } .spacer-sml { margin: 0; padding: 0; height: 2em; } <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <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-fluid portfolio-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> <li class="list-group-item list-group-item-title text-center "> <label class="portfolio-details"></label> </li> <li class="list-group-item list-group-item-title text-center "> <label class="portfolio-details"></label> </li> <li class="list-group-item list-group-item-title text-center "> <label class="portfolio-details"></label> </li> <li class="list-group-item list-group-item-title text-center "> <label class="portfolio-details"></label> </li> </ul> </div> </div> <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">Projects</a></li> <li><a data-toggle="tab" role="tab" class="" href="#portfolio-time-management-tab">Timeline Chart</a></li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div id="portfolio-projects-tab" class="tab-pane fade in active"> <div class="tab-block-content "> <div class="row "> <div class="col-sm-12 "> <div class="spacer-sml"></div> </div> <div class="col-sm-12"> <h1> Project tab that is loaded by default but issue is with Timeline Chart tab chart being hidden </h1> </div> </div> </div> </div> <div id="portfolio-time-management-tab" class="tab-pane fade"> <div class="row col-xs-12"> <div class="spacer-sml"></div> </div> <div class="col-xs-11"> <div id="portfolio-time-management-chart" style="position:relative;"></div> </div> <div class="row col-xs-12"> <div class="spacer-sml"></div> </div> <div class="row "> <div class="spacer-sml"></div> </div> </div> </div> </div> </div> </div> </div> 有谁知道我怎样才能得到完整的图表可见？
