如何增加谷歌條形圖中的條形寬度？

Question

我了解bar: { groupWidth: '100%'}將條形寬度增加到最大。

但我需要在右側顯示圖例，所以我chartArea: { right:'60%'}進行編碼以創建更多空間來顯示圖例，這導致條形寬度沒有更多空間。 截圖如下：

在此處輸入圖像描述

是否有任何解決方案可以制作bar: { groupWidth: '300%'}或制作bar groupWidth而不管chartArea: { right:'60%'} ？

 google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var data = google.visualization.arrayToDataTable([ ['Plan', 'SEED FUND = USD50,000', 'LOAN FUND = USD50,000', 'PROFIT = USD3000'], ['MCF', 50000, 50000, 3000], ]); var options = { title: { position: 'none'}, vAxis: {title: 'MCF Equity'}, hAxis: {title: 'USD'}, seriesType: 'bars', series: {5: {type: 'line'}}, legend: {alignment: "center"}, chartArea: {top:10, bottom:80, left:'20%', right:'60%', 'width': '1000%' }, isStacked: true, bar: { groupWidth: '200%'}, hAxis: { viewWindow: { min: 0, max: 6 } } }; var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); chart.draw(data, options); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" class="chart"></div>

Answer 1

隨便玩玩，不小心得到了解決方案。 只需將max: 6更改為max: 3

演示：

 google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var data = google.visualization.arrayToDataTable([ ['Plan', 'SEED FUND = USD50,000', 'LOAN FUND = USD50,000', 'PROFIT = USD3000'], ['MCF', 50000, 50000, 3000], ]); var options = { title: { position: 'none'}, vAxis: {title: 'MCF Equity'}, hAxis: {title: 'USD'}, seriesType: 'bars', series: {5: {type: 'line'}}, legend: {alignment: "center"}, chartArea: {top:10, bottom:80, left:'20%', right:'60%', 'width': '1000%' }, isStacked: true, bar: { groupWidth: '200%'}, hAxis: { viewWindow: { min: 0, max: 3 } } }; var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); chart.draw(data, options); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" class="chart"></div>