Question

我正在使用谷歌图表，它显示了堆积的条形图。我试过class _PainterRenderBox extends RenderBox { final _lines = new List<Path>(); PanGestureRecognizer _drag; Path _currentPath; // variable to store padding Offset padding; _PainterRenderBox() { final GestureArenaTeam team = new GestureArenaTeam(); _drag = new PanGestureRecognizer() ..team = team ..onStart = _handleDragStart ..onUpdate = _handleDragUpdate ..onEnd = _handleDragEnd; } @override bool get sizedByParent => true; @override bool hitTestSelf(Offset position) => true; @override handleEvent(PointerEvent event, BoxHitTestEntry entry) { assert(debugHandleEvent(event, entry)); if (event is PointerDownEvent) { _drag.addPointer(event); } } @override paint(PaintingContext context, Offset offset) { final Canvas canvas = context.canvas; // update padding padding = offset; final Paint paintBorder = new Paint() ..strokeWidth = 1.0 ..style = PaintingStyle.stroke ..color = Colors.white.withAlpha(128); canvas.drawRect(offset & size, paintBorder); final Paint paintPath = new Paint() ..strokeWidth = 5.0 ..style = PaintingStyle.stroke ..color = Colors.white; _lines.forEach((path) { canvas.drawPath(path, paintPath); }); } // check if the point lies inside drawable area bool _canDraw(Offset offset){ return (padding & size).contains(offset); } void _handleDragStart(DragStartDetails details) { _currentPath = new Path(); Offset point = globalToLocal(details.globalPosition); // convert globalPosition to localPosition point = padding + point; // add the padding to localPosition if any // check if point lies inside drawable area and then markNeedsPaint if(_canDraw(point)){ _currentPath?.moveTo(point.dx, point.dy); _lines.add(_currentPath); markNeedsPaint(); } } void _handleDragUpdate(DragUpdateDetails details) { Offset point = globalToLocal(details.globalPosition); // convert globalPosition to localPosition point = padding + point; // add the padding to localPosition if any // check if point lies inside drawable area and then markNeedsPaint if(_canDraw(point)){ _currentPath?.lineTo(point.dx, point.dy); markNeedsPaint(); } } void _handleDragEnd(DragEndDetails details) { _currentPath = null; markNeedsPaint(); } }，但有助于增加宽度。

非常感谢任何帮助。

groupwidth

function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
               ['name', 'data1', 'data2','data3'],
               ['w1',  40,20,40],
               ['w2',  40,20,40],
               ['w2',  40,20,40],
               ['w2',  40,20,40], ['w2',  40,20,40],
               ['w2',  40,20,40], ['w2',  40,20,40],
               ['w2',  40,20,40],
              
            ]);

            var options = {title: 'Percentage of Risk', isStacked:true,bar: {width:"200%",height:"1200%",gap:"10%"}};  

            // Instantiate and draw the chart.
            var chart = new google.visualization.BarChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);

#container {
  width: 550px; height: 1200px; margin: 0 auto
}

Answer 1

要增加Google Charts中一组条形图的宽度，您必须使用groupWidth配置。

此配置的语法是： bar: {groupWidth: '100%'} 它放在图表options变量中。

因此，对于您的特定代码，它将是：

var options = {title: 'Percentage of Risk', 
               isStacked:true,
               bar: {groupWidth: '100%'}};

可以将条形组的宽度指定为像素，例如75或指定为50%的百分比。对于百分比数据类型，100%表示栏之间没有空格。

图表配置的官方文档：https://developers.google.com/chart/interactive/docs/gallery/columnchart#configuration-options

Answer 2

如果你想增加宽度，那么你应该试试这个，我也把我的代码：

    <script>
        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawVisualization);
    
        function drawVisualization() {
            // Chart data
            var data = google.visualization.arrayToDataTable([
              ['SALES',  'FINANCIAL YEAR'],
              ['FY-16',100],
              ['FY-17', 230],
              ['FY-18', 520],
              ['FY-19', 940],
              ['FY-20', 1400],
                ['FY-21', 2000]
            ]);
    
            //Chart Custom Options
            var options = {
                title: 'SALES',
                vAxis: { title: 'SALES', ticks: [0, 200, 400, 600, 800, 1000, 1200,1400,1600,1800,2000,2200] },
                hAxis: { title: 'FINANCIAL YEAR' },
                seriesType: 'bars',
                colors: ['#f58a07'],
              
                legend: { position: 'bottom', maxLines: 2, pagingTextStyle: { color: '#374a6f' }, scrollArrows: { activeColor: '#666', inactiveColor: '#ccc' } },
                series: { 1: { pointSize: 2, type: 'line' } },
                animation: {
                    duration: 1000,
                    easing: 'linear',
                    startup: true
                }
            };
    
            var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    
        $(window).resize(function () {
            drawVisualization();
        });
    </script>`enter code here`
    
    
    ----------
     <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div id="chart_div" class="chart"></div>
                    </div>
                </div>
              
              
            </div>
    
    
    ----------
    <style type="text/css">
        .chart {
            width: 100%;
            min-height: 500px;
        }
         @media(max-width: 667px) {
             .chart {
            width: 350px;
            min-height: 400px;
        }
            }
    </style>

如何增加谷歌堆积条形图中水平条之间的空间

2 个答案: