Графики Google

  • Предыдущая страница Chart.js
  • Следующая страница D3.js

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

  • Сгруппированная диаграмма (Scatter Chart)
  • Линейная диаграмма (Line Chart)
  • Барная / столбчатая диаграмма (Bar / Column Chart)
  • Площадная диаграмма (Area Chart)
  • Диаграмма с сектором (Pie Chart)
  • Тортическая диаграмма (Donut Chart)
  • Организационная структура (Org Chart)
  • Карта / географическая диаграмма (Map / Geo Chart)

Как использовать Google Chart?

Если вы хотите использовать Google Chart на своей веб-странице, пожалуйстаДобавить ссылку на загрузчик диаграммы:

<script
src="https://www.gstatic.com/charts/loader.js">
</script>

Google Charts легко использовать.

Достаточно добавить один <div> Элемент может отображать диаграмму:

<div id="myChart" style="max-width:700px; height:400px"></div>

Элемент <div> должен иметь уникальный ID.

Затем загрузить Google Graph API:

  1. Загрузить Visualization API и пакет corechart
  2. Установить обратный вызов, который вызывается после загрузки API
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

и все!

линейная диаграмма

Исходный код

function drawChart() {
// Настройка данных
var data = google.visualization.arrayToDataTable([
  ['Цена', 'Размер']
  [50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
  [110,10],[120,11],[130,14],[140,14],[150,15]
  ]
// Настройка параметров
var options = {
  title: 'Цена и площадь дома'
  hAxis: {title: 'Квадратные метры'},
  vAxis: {title: 'Цена в миллионах'},
  legend: 'none'
};
// Рисовать график
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Попробуйте сами

сгруппированные точки

с теми же данными, чтобы создатьсгруппированные точки, пожалуйста, замените google.visualization измените на ScatterChart:

var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));

Попробуйте сами

гистограмма

Исходный код

function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['Италия', 55],
  ['Франция', 49],
  ['Испания', 44],
  ['США', 24],
  
]
var options = {
  title: 'Производство вина в мире'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Попробуйте сами

диаграмма饼а

Чтобы преобразовать гистограмму вдиаграмма饼аПросто используйте:

google.visualization.PieChart

Замените:

google.visualization.BarChart

var chart = new google.visualization.PieChart(document.getElementById('myChart'));

Попробуйте сами

3D-диаграмма饼а

Чтобы отобразить диаграмму饼а в 3D-формате, нужно просто is3D: true добавить в опции:}}

var options = {
  title: 'Производство винограда в мире',
  is3D: true
};

Попробуйте сами

  • Предыдущая страница Chart.js
  • Следующая страница D3.js