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

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>

标签： javascriptgoogle-visualization

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>