如何從谷歌圖表中刪除標題和公告

Question

我正在使用谷歌甜甜圈圖，但它顯示了標題和項目符號。

我需要知道如何移除它們並使圖表適合卡內。

<div class="col-xl-4 col-lg-12 col-md-4 col-sm-12 col-12">
    <div class="card">
        <h5 class="card-header">Credits History</h5>
        <div class="card-body">
            <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',     11],
                  ['Eat',      2]
                ]);

                var options = {
                  title: 'My Daily Activities',
                  pieHole: 0.4,
                };

                var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
                chart.draw(data, options);
              }
            </script>  
            <div id="donutchart" style="width: 220px; height: 155px;"></div>
        </div>
    </div>
</div>

Answer 1

要刪除圖表標題，請從圖表選項中刪除title選項。

至於子彈，或公告，那是圖表的圖例，
要刪除，請添加以下選項 --> legend: 'none'

並且您可以使用chartArea選項來最大化容器內的圖表。

var options = {
  chartArea: {
    height: '100%',
    width: '100%'
  },
  legend: 'none',
  pieHole: 0.4
};

請參閱以下工作片段...

 google.charts.load("current", { packages: ["corechart"] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2] ]); var options = { chartArea: { height: '100%', width: '100%' }, legend: 'none', pieHole: 0.4 }; var chart = new google.visualization.PieChart(document.getElementById('donutchart')); chart.draw(data, options); }

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="donutchart" style="width: 220px; height: 155px;"></div>