Круговая диаграмма Google очень маленькая, но занимает большую площадь

У меня есть следующая страница (пожалуйста, посмотрите ниже) с Bootstrap 4 и диаграммой Google.

Есть 3 черных ящика, один справа имеет круговую диаграмму Google. У меня проблема в том, что область, используемая для диаграммы, слишком велика по сравнению с фактической диаграммой.

Поэтому я настраиваю диаграмму с этим размером:

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

но, как вы можете видеть, он занимает все это пространство, но на самом деле диаграмма составляет половину размера области, используемой этим div.

Есть ли способ настроить это, чтобы уменьшить область, используемую этим div, но увеличить размер диаграммы, чтобы использовать большую часть пространства 500 x 250 пикселей?

Спасибо

<!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>


javascript html bootstrap-4 pie-chart google-chat
person MarcosF8    schedule 22.02.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел ответ: в опции: chartArea: {ширина: 400, высота: 300}

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

person MarcosF8    schedule 24.02.2019