###前提・実現したいこと
ここに質問したいことを詳細に書いてください
実現したいことは,GoogleChartsのLineChartを横幅に隙間なく表示したいです。
現在以下のサイト(https://developers.google.com/chart/interactive/docs/gallery/linechart)を参考に、下図のようにLineChartの表示をすることはできました。
###発生している問題
###該当のソースコード
php
1<html> 2 <head> 3 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 4 <script type="text/javascript"> 5 google.charts.load('current', {'packages':['corechart']}); 6 google.charts.setOnLoadCallback(drawChart); 7 8 function drawChart() { 9 var data = google.visualization.arrayToDataTable([ 10 ['Year', 'Sales', 'Expenses'], 11 ['2004', 1000, 400], 12 ['2005', 1170, 460], 13 ['2006', 660, 1120], 14 ['2007', 1030, 540] 15 ]); 16 17 var options = { 18 fontName: 'Roboto', 19 title: "テスト", 20 titlePosition:'none', 21 width: '100%', 22 height: '100%', 23 bar: {groupWidth: "100%"}, 24 legend: { position: "none"}, 25 tooltip: { 26 trigger: 'both', 27 isHtml: true 28 }, 29 hAxis:{ 30 gridlines:{color: 'none', count:5}, 31 baselineColor: 'none', 32 textPosition: 'out' 33 }, 34 vAxis:{ 35 gridlines:{color: 'none', count:3}, 36 baselineColor: 'none', 37 textPosition: 'none' 38 }, 39 animation: { 40 duration: 700, 41 easing: 'inAndOut', 42 startup: true, 43 delay: 2 44 }, 45 //chartArea: {top: 10, bottom: 0, width: '100%'} 46 chartArea: {'width':'200%', 'height':'100%', 'left':100} 47 48 }; 49 50 var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 51 52 chart.draw(data, options); 53 } 54 55 56 </script> 57<style type="text/css"> 58 div#curve_chart {position: absolute; 59 top: 100px; 60 } 61 </style> 62 </head> 63 64 <body> 65 <div id="curve_chart" style="width: 100%; height: 35%; position: absolute; bottom: 0px"></div> 66 </body> 67 </html>
###試したこと
様々なサイトを参考に,ソースコードのchartArea部分の「left」の値を100にしたり数値を変えたりしましたがどうやってもグラフの両端に空白が出来てしまいます。x軸の0を画面最左に、x軸の最大を最右として表示したいのですが方法がわかりません。
どなたかわかる方いましたらどうかご教示ください...よろしくお願いしますm(_ _)m
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。