Google Chart within Bootstrap 3 Nav

前端未结

关注

 1  398

I have a page using bootstrap 3 nav tabs and on one of the tabs I have a google timeline chart that is too far to the left. I have tried setting the chartArea.left option to

相关标签:

1条回答

臣服心动

2020-12-11 12:32

by default, google charts will follow the size of their container.
if the container is hidden when its drawn,
then it cannot determine a proper size for the specific chart elements.

need to wait until the tab is shown,
before drawing for the first time.

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

see following working snippet...

var selectedLanguage = 'en';
    if ($("#selected-language") && $("#selected-language").val()) {
        selectedLanguage = $("#selected-language").val();
    }

    google.charts.load('current', {
        'packages': ['timeline'],
        'language': selectedLanguage
    }).then(function () {
      $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
          switch ($(e.target).html()) {
            case 'Timeline Chart':
              drawTimelineChart();
              window.addEventListener('resize', drawTimelineChart);
              break;
          }
      });
    });

    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,
                };
                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>

0 讨论(0)