Google餅圖很小，但占地很大

Question

我有以下頁面（請在下面查看），其中包含Bootstrap 4和Google圖表。

有3個黑匣子，右邊的一個有Google圖表餅圖。 我的問題是圖表所使用的面積與實際圖表相比太大。

因此，我將圖表配置為此尺寸：

div id="piechart_3d" style="width: 500px; height: 250px;"></div>

但正如您所看到的，它占用了所有空間，但是圖表實際上是該div使用的區域大小的一半。

有什么方法可以配置它以減少該div使用的面積，但是可以增加圖表的大小以使用500px x 250px的大部分空間？

謝謝

<!DOCTYPE html> <html lang="en">

 <head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
    google.charts.load("current", { packages: ["corechart"] });
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Task', 'Hours per Day'],
            ['Work', 60],
            ['Eat', 20],
            ['Watch TV', 10],
            ['Sleep', 10]
        ]);

        var options = {
            //title: 'My Daily Activities',
            backgroundColor: '#343a40',
            colors: ['#2F5499', '#3965B8', '#708CCE', '#4A6BAD'],
            is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
    }
 </script>
 </head>
 </head>

   <body>

   <style>
    .card-body {
        padding: 0.01rem
    }

    .padding-header {
        padding: 0.6rem
    }

    .bg-light-blue {
        background-color: #4671C3;
    }

    .bg-lila {
        background-color: #6F339F;
    }

    .bg-dark {
        background-color: #424242;
    }

    .black-box-size {
        max-width: 100%;
        height: 300px;
    }

    .shape-round {
        height: 150px;
        width: 150px;
        background-color: #6F339F;
        border-radius: 50%;
        display: inline-block;
        text-align: center;
        color: #fff;
        padding: 3.5rem 1.5rem;
    }

    .block-container {
        position: absolute;
        top: 40%;
        left: 50%;
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        width: 109px;
        height: 38px;
    }
</style>
<div class="container-fluid">

    <div class="row">
        <div class="col-md-12">
            <h2 class="padding-header bg-light-blue text-white">Opportunity Breakdown (Sat)</h2>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-11">
                    <div class="black-box-size bg-dark text-white">
                        <div>
                            <h2 class="text-center padding-header">Today</h2>
                            <div id="chartContainer" style="height: 300px; width: 100%;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-1">

                </div>
            </div>
        </div>
        <div class="col-md-4">

            <div class="black-box-size bg-dark text-white">
                <div>
                    <h2 class="text-center padding-header">This Week</h2>
                </div>
            </div>

        </div>
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-1">

                </div>
                <div class="col-md-11">
                    <div class="black-box-size bg-dark text-white">
                        <div>
                            <h2 class="text-center padding-header">This Month</h2>
                            <div >

                                <div id="piechart_3d" style="width: 500px; height: 250px;"></div>


                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <p></p>
</div>

Answer 1

我找到了響應：在選項中：chartArea：{width：400，height：300}

https://developers.google.com/chart/interactive/docs/gallery/piechart#configuration-options

Google餅圖很小，但占地很大

問題描述

1 個解決方案

解決方案1
0 已采納 2019-02-24 17:58:41

Google餅圖很小，但占地很大

問題描述

1 個解決方案

解決方案1 0 已采納 2019-02-24 17:58:41

解決方案1
0 已采納 2019-02-24 17:58:41