twitter-bootstrap - 响应式Google Analytics图表

Question

如何使我的图表响应Bootstrap？

您可以在这里看到，它们都没有正确调整大小



我尝试将width设置为100％，但似乎不遵循...

<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]});google.setOnLoadCallback(drawChart);
    var chart, data, options;
    function drawChart() {
        data = google.visualization.arrayToDataTable([
              ['Day', 'Views', 'Visits', 'Bounces'],
                <?php
                    foreach($rArr as $key => $value){
                        echo '["'.$key.'", '.$this->DefaultNumber($value[0]).', '.$this->DefaultNumber($value[1]).', '.$this->DefaultNumber($value[2]).'],';
                    }
                ?>
            ]);
        options = {
                width: '100%',
                height: <?php echo $height; ?>, 
                title: '<?php echo $this->initialstartdate; ?><?php echo ' - '.$this->initialenddate; ?>',
                titleTextStyle: {color: 'black', fontName: 'Calibri', 
                        fontSize: '14'},
                colors:['#333','#999', '#ccc'],
                backgroundColor: {fill: '#F5F5F5', opacity: 100},
                areaOpacity: 0.1,
                hAxis: {textPosition: 'in', 
                    showTextEvery: <?php echo $dateGap; ?>, 
                    slantedText: false, 
                    textStyle: {color: 'black', fontName: 'Calibri', 
                        fontSize: '12'}},
                vAxis: {textStyle: {color: 'black', fontName: 'Calibri', 
                        fontSize: '12'}},
                pointSize: 5,
                legend: { position: 'bottom',textStyle: {color: 'black', fontName: 'Calibri', 
                        fontSize: '12'}},
                isStacked: false
            };
        chart = new google.visualization.AreaChart(document.getElementById('<?php echo $divId; ?>'));
        chart.draw(data, options);
    }
    </script>

包装代码

<div class="well">
    <div class="row">
        <div class="col-sm-12">
            <h4>Visits vs. Views vs. Bounces</h4>
            <div id="v-chart"></div>
        </div>
    </div>
</div>

Answer 1

您需要做的是重新绘制Google可视化效果。在drawChart函数的末尾添加以下行。

window.onresize = function(){chart.draw(data, options);};

绘制图表时，我也不使用 width和 height属性。我只是省略了它们，图表将按比例缩放以适合您的目标div，因此您只需要使用CSS正确缩放div。如果div更改了大小，您仍然需要重绘。

例

Here is an example of this working。尝试打开它并调整窗口大小。图表应重新绘制并更新其大小以覆盖所有窗口。