Гугл диаграммы

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

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

  • График точек (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],
  ['Аргентина', 15]
]);
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
};

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

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