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：{宽度：400，高度：300}

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

Google饼图很小，但占地很大

1 个答案: