Построение диаграмм на страницах сайта с помощью Google Charts

Google Charts – JavaScript библиотека, для простого создания графиков и диаграмм. Предоставляет множество предварительно созданных диаграмм, таких как комбинированные гистограммы, столбчатые диаграммы, календарные графики и прочими.

Графики формируются с помощью HTML5/SVG а значит являются кроссбраузерными.

Для работы с библиотекой подключим её в шапке сайта:

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>google.charts.load('current', {packages: ['corechart']});</script>

В первой строчке мы подключаем сам загрузчик на сайт. После подключения загрузчика мы вызываем функцию google.charts.load чтобы загрузить пакеты для определенных диаграмм. Эти строки вызываются единожды на весь сайт.

Далее вызываем функцию построения графика/диаграммы:

  <script>
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      // Define the chart to be drawn.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Element');
      data.addColumn('number', 'Percentage');
      data.addRows([
        ['Nitrogen', 0.78],
        ['Oxygen', 0.21],
        ['Other', 0.01]
      ]);

      // Instantiate and draw the chart.
      var chart = new google.visualization.PieChart(document.getElementById('myPieChart'));
      chart.draw(data, null);
    }
  </script>

и определяем место куда следует разметить диаграмму, в нашем случае это div с id = myNewChart

<div id="myNewChart"></div>

Чуть ниже вы можете увидеть живой пример работы описанной нами диаграммы.

Чтобы изменить вводные данные в диаграмме – обращайтесь к data.addRows.

Так же можно передавать дополнительные параметры при построении диаграммы. Создадим объект options и поместим в него данные:

 var options = {
          title: 'моя вторая диаграмма будет объемной',
          is3D: true,
        };

Вы можете найти примеры других интерактивных диаграмм от google на этой странице.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *