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

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

0 голосов
/ 22 февраля 2019

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

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

Итак, я настраивал диаграмму с таким размером: 

div id="piechart_3d" style="width: 500px; height: 250px;"></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 Ответ

0 голосов
/ 24 февраля 2019

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

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

...