javascript - 在窗口中重新调整 Google 图表的大小

Question

请帮助我如何在窗口也重新调整大小时自动调整 Google 图表的大小。

这里有一些代码:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Day', 'Open ticket', 'Closed ticket'],
            ['Day 1',  10,   400],
            ['Day 2',  170,  460],
            ['Day 3',  60,   1120],
            ['Day 4',  30,   540],
        ]);
        var options = {
            title: 'DAILY GRAPH',
            hAxis: {title: 'NOVEMBER',  titleTextStyle: {color: '#333'}},
            vAxis: {minValue: 0}
        };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
</script>

Answer 1

这是一种方法:

添加此事件处理程序:

 window.onresize = drawChart;

然后将图表的宽度和高度基于窗口宽度和高度的百分比:

    var width = .4 * window.innerHeight;
    var height = .4 * window.innerWidth;

    var options = {
        title: 'DAILY GRAPH',
        width: width,
        height: height,
        hAxis: { title: 'NOVEMBER', titleTextStyle: { color: '#333' } },
        vAxis: { minValue: 0 }
    };