Как сделать - Google график
Узнать, как добавить диаграммы Google на свою веб страницу.
Пример
Редактор кода »Круговая диаграмма Google
Начните с простой базовой веб страницы.
Добавить элемент <div> с помощью идентификатора "piechart":
Пример
<!DOCTYPE html>
<html>
<body>
<h1>Моя веб страница</h1>
<div id="piechart"></div>
</body>
<html>Добавить ссылка на API диаграммы по адресу google.com:
Пример
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>И добавьте функцию JavaScript:
Пример
<script type="text/javascript">
// Гугл графика нагрузки
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Нарисуйте диаграмму и установите значения диаграммы
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Задача', 'часы в день'],
['Работа', 8],
['Друзья', 2],
['Обед', 2],
['ТВ', 2],
['Тренажерный зал', 2],
['Сон', 8]
]);
// Необязательно; добавьте заголовок и задайте ширину и высоту диаграммы
var options = {'title':'Мой простой день', 'width':550, 'height':400};
// Отображение диаграммы внутри <div> с помощью идентификатора id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>Редактор кода »