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

У меня есть следующая страница (пожалуйста, смотрите ниже), с 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>

Источник

1 ответ

Решение

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

https://developers.google.com/chart/interactive/docs/gallery/piechart

Источник
Другие вопросы по тегам