Javascript 如何调整图表的大小以适应具有Google API的父容器

所以我用谷歌的可视化API创建了一个组合图，但是我在调整图表大小以适应其父容器时遇到了问题

这就是它在网站上的外观，父容器的宽度是悬停的宽度。我想让图表填满整个家长的宽度

我有一个面板系统，其中每个选项卡都有一个不同的图表。第一个像一个符咒，我没有问题，它填补了家长的容器宽度正确，但第二个是我有问题的一个

这是HTML

 <div class="tab-pane fade in active" id="anuales">
    <div id ="anual-bar-chart" height ="500px" ></div>
 </div>
 <div class="tab-pane fade in" id="semestre-1">
    <div id ="semester-1-chart" height="500px"></div>
 </div>

底部名为char2的是我遇到问题的图表。我放了另一个给你看，我使用相同的配置，但不知怎么的，它显示的图表不同

---

有人能告诉我我能做什么吗，因为我一直在四处张望，什么都没有。我尝试调整api提到的“chartArea”配置的大小，但这只会去掉标签，但不适合父容器

谷歌图表不会自动调整大小。当事物调整大小时，它们必须重新绘制（显示/隐藏是一种调整大小的过程）。 我相信我剽窃的以下代码应该可以解决您的问题（您也需要jquery）：

---

我不知道我的建议是否能解决你的问题。。。你不应该分别打两次电话来画图形吗？也许您的第一个条形图正在影响第二个条形图，因为您将它们捆绑到一个函数调用中。对于我的一个项目，我需要交付一个piechart和一个GeoArt，因此我创建了一个单独的函数来单独调用它们

请试试这个：

function drawCharts(){
    anualBarChart();
    semester1Chart();
}       
function anualBarChart(){
    var data = google.visualization.arrayToDataTable([
        ['Año', 'Nacimiento', 'Reconocimiento', 'Adopción Simple', 'Matrimonios', 'Divorcios', 'Defunciones', 'Sentencias', 'Actas Foráneas', 'Promedio'],
        ['1997',  39520,732,39,10332,489,6033,88,0,7154],
        ['1998',  39113,728,61,9908,607,6261,82,0,7095],
        ['1999',  41007,825,58,10476,611,6103,74,0,7394],
        ['2000',  40337,898,30,10479,685,6198,80,0,7338],
        ['2001',  38132,847,10,9856,849,6288,78,0,7008],
        ['2002',  36933,856,7,9532,826,6425,96,0,6834],
        ['2003',  38688,858,63,9600,915,6731,139,0,7124],
        ['2004',  39612,919,40,9088,962,6674,199,0,7187],
        ['2005',  40985,1053,6,8785,1037,6874,215,0,7369],
        ['2006',  38863,1031,28,9023,1063,6954,164,0,7141],
        ['2007',  42757,1226,0,9318,1177,7169,3,0,8596],
        ['2008',  41310,1268,1,8842,1224,7676,1,0,7540],
        ['2009',  41155,1227,4,8185,1136,7757,5,0,7434],
        ['2010',  10867,1258,3,8268,1200,8250,3,330,7522],
        ['2011',  41760,1314,2,8977,1356,8077,5,987,7810],
        ['2012',  41553,1386,4,9240,1400,8622,7,782,7874],
        ['2013',  40953,1415,0,9726,1603,9107,11,622,7930],
        ['2014',  40981,1305,0,9713,1516,9349,5,619,7936],
        ['2015',  27017,887,0,6342,1227,3085,3,398,5245],
    ]);

    var options = {
        titleTextStyle: {color:'white'},
        backgroundColor: {fill: 'transparent'},
        chartArea: {width:'85%',height:'65%'},
        vAxis: {textStyle:{color:'white'}},
        legend:{textStyle: {color: 'white'}, position: 'bottom'},
        height: 350,
        hAxis: {textStyle:{color:'white'}},
        seriesType: 'bars',
        series: {8 : {type: 'line'}}
    };

    var chart = new google.visualization.ComboChart(document.getElementById('anual-bar-chart'));
    chart.draw(data, options);
}
function semester1Chart(){
    var data2 = google.visualization.arrayToDataTable([
        ['Mes', 'Nacimiento', 'Defunciones', 'Matrimonios', 'Divorcios', 'Reconocimientos', 'Adopción Simple', 'Sentencias', 'Actas Foráneas', 'Promedio'],
        ['Ene-15',3865,897,586,130,138,0,0,38,0],
        ['Feb-15',3322,793,818,166,143,0,0,62,0],
        ['Mar-15',3314,802,745,156,88,0,0,52,0],
        ['Abr-15',3289,714,653,159,106,0,1,35,0],
        ['May-15',3153,718,662,155,20,0,0,37,0],
        ['Jun-15',3349,728,901,162,103,0,0,42,0],
        ['Jul-15',3254,697,797,168,10,0,2,70,0],
        ['Ago-15',3462,736,1182,131,123,0,0,62,0],
    ]);

    var options2 = {
        titleTextStyle: {color:'white'},
        backgroundColor: {fill: 'transparent'},
        chartArea: {width:'85%',height:'65%'},
        vAxis: {textStyle:{color:'white'}},
        legend:{textStyle: {color: 'white'}, position: 'bottom'},
        height: 350,
        hAxis: {textStyle:{color:'white'}},
        seriesType: 'bars',
        series: {8 : {type: 'line'}}
    };

    var chart2 = new google.visualization.ComboChart(document.getElementById('semester-1-chart'));
    chart2.draw(data2, options2);       
}
google.load("visualization", "1", {packages:["corechart","bar"]});
google.setOnLoadCallback(drawCharts);

---

我越想，这不应该有什么区别。如果是半身像，请告诉我，我会将其删除，而不是减少选票。

有没有办法做到这一点，但使用均匀加载而不是调整大小？如果我正确理解您的评论，document.ready与您正在寻找的内容类似。看看这个是的，我试过了，但没有成功。。。不过我想办法了。。。谢谢

//create trigger to resizeEnd event     
$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

//redraw graph when window resize is completed  
$(window).on('resizeEnd', function() {
    drawChart(data);
});

function drawCharts(){
    anualBarChart();
    semester1Chart();
}       
function anualBarChart(){
    var data = google.visualization.arrayToDataTable([
        ['Año', 'Nacimiento', 'Reconocimiento', 'Adopción Simple', 'Matrimonios', 'Divorcios', 'Defunciones', 'Sentencias', 'Actas Foráneas', 'Promedio'],
        ['1997',  39520,732,39,10332,489,6033,88,0,7154],
        ['1998',  39113,728,61,9908,607,6261,82,0,7095],
        ['1999',  41007,825,58,10476,611,6103,74,0,7394],
        ['2000',  40337,898,30,10479,685,6198,80,0,7338],
        ['2001',  38132,847,10,9856,849,6288,78,0,7008],
        ['2002',  36933,856,7,9532,826,6425,96,0,6834],
        ['2003',  38688,858,63,9600,915,6731,139,0,7124],
        ['2004',  39612,919,40,9088,962,6674,199,0,7187],
        ['2005',  40985,1053,6,8785,1037,6874,215,0,7369],
        ['2006',  38863,1031,28,9023,1063,6954,164,0,7141],
        ['2007',  42757,1226,0,9318,1177,7169,3,0,8596],
        ['2008',  41310,1268,1,8842,1224,7676,1,0,7540],
        ['2009',  41155,1227,4,8185,1136,7757,5,0,7434],
        ['2010',  10867,1258,3,8268,1200,8250,3,330,7522],
        ['2011',  41760,1314,2,8977,1356,8077,5,987,7810],
        ['2012',  41553,1386,4,9240,1400,8622,7,782,7874],
        ['2013',  40953,1415,0,9726,1603,9107,11,622,7930],
        ['2014',  40981,1305,0,9713,1516,9349,5,619,7936],
        ['2015',  27017,887,0,6342,1227,3085,3,398,5245],
    ]);

    var options = {
        titleTextStyle: {color:'white'},
        backgroundColor: {fill: 'transparent'},
        chartArea: {width:'85%',height:'65%'},
        vAxis: {textStyle:{color:'white'}},
        legend:{textStyle: {color: 'white'}, position: 'bottom'},
        height: 350,
        hAxis: {textStyle:{color:'white'}},
        seriesType: 'bars',
        series: {8 : {type: 'line'}}
    };

    var chart = new google.visualization.ComboChart(document.getElementById('anual-bar-chart'));
    chart.draw(data, options);
}
function semester1Chart(){
    var data2 = google.visualization.arrayToDataTable([
        ['Mes', 'Nacimiento', 'Defunciones', 'Matrimonios', 'Divorcios', 'Reconocimientos', 'Adopción Simple', 'Sentencias', 'Actas Foráneas', 'Promedio'],
        ['Ene-15',3865,897,586,130,138,0,0,38,0],
        ['Feb-15',3322,793,818,166,143,0,0,62,0],
        ['Mar-15',3314,802,745,156,88,0,0,52,0],
        ['Abr-15',3289,714,653,159,106,0,1,35,0],
        ['May-15',3153,718,662,155,20,0,0,37,0],
        ['Jun-15',3349,728,901,162,103,0,0,42,0],
        ['Jul-15',3254,697,797,168,10,0,2,70,0],
        ['Ago-15',3462,736,1182,131,123,0,0,62,0],
    ]);

    var options2 = {
        titleTextStyle: {color:'white'},
        backgroundColor: {fill: 'transparent'},
        chartArea: {width:'85%',height:'65%'},
        vAxis: {textStyle:{color:'white'}},
        legend:{textStyle: {color: 'white'}, position: 'bottom'},
        height: 350,
        hAxis: {textStyle:{color:'white'}},
        seriesType: 'bars',
        series: {8 : {type: 'line'}}
    };

    var chart2 = new google.visualization.ComboChart(document.getElementById('semester-1-chart'));
    chart2.draw(data2, options2);       
}
google.load("visualization", "1", {packages:["corechart","bar"]});
google.setOnLoadCallback(drawCharts);