調整Google圖表以填滿div寬度和高度

剛開始使用Google圖表時，我正嘗試創建一個填充可用空間的折線圖。似乎圖表被鎖定在一定的長寬比，但無論我如何更改圖表和圖表div元素的高度和寬度屬性，結果都與我的維度不匹配。調整Google圖表以填滿div寬度和高度

Google圖表是否以這種方式修復或者是否存在我丟失的覆蓋或寬高比選項？

你可以在這裏找到一個例子：

http://www.walkingcarpet.net/graphs/unemployment-rate/

謝謝！

來源

2017-01-20 Tom

在除了設置width選項，

設置chartArea.width以確保圖表利用可用空間

此外，當窗口大小，圖表需要重新繪製

請參閱以下工作片段...

google.charts.load('current', { 
 
    callback: function() { 
 
    drawChart(); 
 
    $(window).resize(drawChart); 
 
    }, 
 
    packages:['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['x', 'y'], 
 
    [0, 0], 
 
    [1, 1], 
 
    [2, 3], 
 
    [3, 7], 
 
    [4, 15], 
 
    [5, 31] 
 
    ]); 
 

 
    var options = { 
 
    chartArea: { 
 
     // leave room for y-axis labels 
 
     width: '94%' 
 
    }, 
 
    legend: { 
 
     position: 'top' 
 
    }, 
 
    width: '100%' 
 
    }; 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.LineChart(container); 
 
    chart.draw(data, options); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

編輯

等等，chartArea還具有使用chartArea.width: '94%'

嘗試設置一個絕對爲left

，而不是一個屬性

看到下面的工作片段...

google.charts.load('current', { 
 
    callback: function() { 
 
    drawChart(); 
 
    $(window).resize(drawChart); 
 
    }, 
 
    packages:['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['x', 'y'], 
 
    [0, 0], 
 
    [1, 1], 
 
    [2, 3], 
 
    [3, 7], 
 
    [4, 15], 
 
    [5, 31] 
 
    ]); 
 

 
    var options = { 
 
    chartArea: { 
 
     left: 40, 
 
     width: '100%' 
 
    }, 
 
    legend: { 
 
     position: 'top' 
 
    }, 
 
    width: '100%' 
 
    }; 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.LineChart(container); 
 
    chart.draw(data, options); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

來源

2017-01-20 20:10:48 WhiteHat

希望這有助於... – WhiteHat

感謝，我到達那裏。好像我必須設置div元素的高度和寬度。當我這樣做時，圖表展開，但使用100％和94％隱藏軸標籤，正如我更新該鏈接時所看到的。想知道如果這是圖表的限制或我的CSS中的東西？ – Tom

看到__EDIT__上面... – WhiteHat

This CodePen顯示了使Google圖表響應的示例。具體地，圖表重繪上resize：

$(window).resize(function(){ 
    drawChart1(); 
    drawChart2(); 
});

來源

2017-01-20 19:57:08 Ouroborus

調整Google圖表以填滿div寬度和高度

回答

相關問題