Как удалить заголовок и бюллетени из диаграмм Google - PullRequest
Новая
       4

Как удалить заголовок и бюллетени из диаграмм Google

1 голос
/ 15 февраля 2020

Я использую Google Donut Chart, но он показывает заголовок и маркеры.

Мне нужно знать, как их удалить и привести карту в соответствие с картой. 

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

1 Ответ

0 голосов
/ 15 февраля 2020

, чтобы удалить заголовок диаграммы, удалите опцию 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>
...