如何增加谷歌条形图中的条形宽度？

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>