响应式Google分析图表

Question

如何让我的图表成为Bootstrap Responsive？

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

我已尝试将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。尝试打开它并调整窗口大小。图表应该重新绘制并更新它的大小以覆盖所有窗口。