Как добавить диаграммы Google на веб-страницу?

Опубликовано: 14 Июля, 2021

Что такое круговая диаграмма?
Круговая диаграмма (или круговая диаграмма) - это круговая статистическая диаграмма, которая разделена на части для иллюстрации числовых пропорций. На круговой диаграмме длина дуги каждого среза (и, следовательно, его центральный угол и площадь) пропорциональна величине, которую он представляет. Хотя он назван из-за сходства с нарезанным пирогом, существуют варианты его подачи.

Приложения круговой диаграммы

  • Круговые диаграммы обычно используются для отображения процентных или пропорциональных данных о продажах различных товаров в бизнесе.
  • Используется на выборах, чтобы показать процент голосов, полученных каждой партией.
  • Используется в опросах, чтобы не отображать элементы в каждой категории.
  • Широко используется в таблицах баз данных и Excel.

Следуйте инструкциям, чтобы добавить круговую диаграмму Google на веб-страницу:
Шаг 1. Начните с простой базовой веб-страницы.
Добавьте элемент «div» с идентификатором «круговая диаграмма»:

Шаг 2. Добавление ссылки
Добавьте ссылку на Chart API на сайте google.com.

Шаг 3. Добавьте функцию JavaScript


Объяснение: приведенный ниже код используется для загрузки диаграмм Google:

Приведенный ниже код используется для построения диаграммы и установки пользовательских значений для каждого подразделения:

Приведенный ниже код используется для отображения диаграммы внутри элемента «div» с id = «piechart»:

ВХОД :




<!DOCTYPE html>
<html lang="en-US">
<body>
  
<h1>Time Allotment of a day</h1>
  
<div id="piechart"></div>
  
<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", 8],
  ["Eat", 2],
  ["TV", 4],
  ["Gym", 2],
  ["Sleep", 8]
]);
  var options = {"title":"My Average Day", "width":550, "height":400};
  var chart =
 new google.visualization.PieChart(document.getElementById("piechart"));
  chart.draw(data, options);
}
</script>
  
</body>
</html>
ВЫХОД : 

Чтобы получить трехмерную круговую диаграмму, установите для параметра is3d значение true: 

 ВХОД : 



 <!DOCTYPE html>
 < html lang = "en-US" >
 < body >
 
< h1 >Time Allotment of a day</ h1 >
 
< div id = "piechart" ></ div >
 
< 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', 8],
  ['Eat', 2],
  ['TV', 4],
  ['Gym', 2],
  ['Sleep', 8]
 ]);
 
  var options =
   {'title':'My Average Day', 'width':550,'height':400,is3D: true};
   
  var chart =
  new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
 }
 </ script >
 
</ body >
 </ html > 
ВЫХОД : 


            

                            

                    
                                    

                        

                
РЕКОМЕНДУЕМЫЕ СТАТЬИ