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

Question

我明白了 bar: { groupWidth: '100%'} 将条形宽度增加到最大值。

但我需要在右侧显示图例，所以我编写了 chartArea: { right:'60%'} 代码来创建更多 space 来显示图例，它不再导致条形宽度 space。截图如下：

enter image description here

有什么解决方案可以使 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>

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

How to increase bar width in google bar chart?

javascript

google-visualization