谷歌图表大小问题

Question

一个页面上显示多个图表，一些用户屏幕较大，一些用户标准屏幕较小。

有没有办法让灵活的宽度适合任何尺寸的显示器屏幕。

我尝试将宽度设置为100％，但它无法正常工作。

<table width="100%">
<tr>
<td>
    <div id="chart_GP" class="chart_div">
        <div class="chart_preloader">&nbsp;</div>
    </div>
</td>
<td id="td_profit">
    <div id="chart_Profit" class="chart_div">
            <div class="chart_preloader">&nbsp;</div>
    </div>
</td>

<td>
    <div id="chart_Visits" class="chart_div">
        <div class="chart_preloader">&nbsp;</div>
    </div>
</td>
</tr>
</table>

CSS

.chart_preloader {
  height:250px; 
  width: 100%; 
  background:url('/images/pie.gif') center center no-repeat;
  background-color : #EEF;
}

.chart_div {
  border-color: #006699; 
  border-style: solid; 
  border-width: 1px;
}

Google图表选项

var options = {
        title: "Last 12 Months Gross Profit per Month",
        animation: {
            duration: 1500,
            startup: true //This is the new option
        },
        pointSize: 5,
        curveType: 'function',
        backgroundColor: chart_background_Color,
        colors: [chartLine_Color],
        legend: 'none',
        width: 385,
        height: 250,
        tooltip: { isHtml: true },
        hAxis: {
            slantedText: true,
            slantedTextAngle: 90
        },
        vAxis: {
            title: 'Profit',
            titleTextStyle: { italic: false, fontName: 'Calibri', fontSize: '12', bold: 'false' }
            //format: '#\'%\''
        }
    };

Answer 1

建议将宽度设置保留在图表选项之外并使用css布局
图表将遵循

很少使用表格，因此取决于您正在寻找的布局，以下是一个示例

使图表响应，在窗口调整大小时重新绘制图表...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Time of Day');
    data.addColumn('number', 'Rating');

    data.addRows([
      [new Date(2015, 0, 1), 5],
      [new Date(2015, 0, 7), 3],
      [new Date(2015, 0, 14), 3],
      [new Date(2015, 0, 21), 2],
      [new Date(2015, 0, 28), 8]
    ]);

    var options = {
        title: "Last 12 Months Gross Profit per Month",
        animation: {
            duration: 1500,
            startup: true //This is the new option
        },
        pointSize: 5,
        curveType: 'function',
        backgroundColor: 'cyan',
        colors: ['red'],
        legend: 'none',
        height: 250,
        tooltip: { isHtml: true },
        hAxis: {
            slantedText: true,
            slantedTextAngle: 90
        },
        vAxis: {
            title: 'Profit',
            titleTextStyle: { italic: false, fontName: 'Calibri', fontSize: '12', bold: 'false' }
            //format: '#\'%\''
        }
    };

    var chart1 = new google.visualization.LineChart(document.getElementById('chart_GP'));
    drawChart(chart1);
    var chart2 = new google.visualization.LineChart(document.getElementById('chart_Profit'));
    drawChart(chart2);
    var chart3 = new google.visualization.LineChart(document.getElementById('chart_Visits'));
    drawChart(chart3);

    // make chart responsive
    window.addEventListener('resize', function () {
      drawChart(chart1);
      drawChart(chart2);
      drawChart(chart3);
    }, false);

    function drawChart(chart) {
      chart.draw(data, options);
    }
  },
  packages:['corechart']
});

.chart_preloader {
  height:250px;
  width: 100%;
  background:url('/images/pie.gif') center center no-repeat;
  background-color : #EEF;
}

.dashboard {
  text-align: center;
}

#chart_GP {
  float: left;
}

#chart_Profit {
  display: inline-block;
}

#chart_Visits {
  float: right;
}

.chart_div {
  border-color: #006699;
  border-style: solid;
  border-width: 1px;
  width: 32%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="dashboard">
    <div id="chart_GP" class="chart_div">
        <div class="chart_preloader">&nbsp;</div>
    </div>
    <div id="chart_Profit" class="chart_div">
            <div class="chart_preloader">&nbsp;</div>
    </div>
    <div id="chart_Visits" class="chart_div">
        <div class="chart_preloader">&nbsp;</div>
    </div>
</div>