Googleチャットサイズの問題

Question

複数のグラフが1ページに表示され、一部のユーザーは画面が大きく、一部のユーザーは標準画面が小さく表示されます。

任意のサイズのモニター画面にフィットできるように、幅を柔軟にする方法はありますか？

幅を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

チャートOPTIOのうち、幅の設定を残してお勧めしますNSので、以下、あなたが探しているレイアウトに依存して、チャートがテーブルを使用することはほとんど

に続かないだろう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>