Нарисуйте диаграмму 

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);

      // Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':400,
                     'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
//Div that will hold the pie chart
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

Последний шаг — нарисовать диаграмму. Сначала вы должны создать экземпляр класса диаграммы, который хотите использовать, а затем вызвать draw() для него.

Создайте экземпляр вашей диаграммы

Каждый тип диаграммы основан на отдельном классе, указанном в документации диаграммы. Например, круговая диаграмма основана на классе google.visualization.PieChart , гистограмма — на классе google.visualization.BarChart и т. д. И круговые, и гистограммы включены в пакет corechart, который вы загрузили в начале этого руководства. Однако, если вы хотите, чтобы на вашей странице была древовидная карта или географическая диаграмма , вам необходимо дополнительно загрузить пакеты «treemap» или «geomap» .

Конструкторы диаграмм Google принимают единственный параметр: ссылку на элемент DOM, в котором можно отрисовать визуализацию.

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

Нарисуйте свою диаграмму

После того как вы подготовили данные и параметры, вы готовы нарисовать диаграмму.

На вашей странице должен быть элемент HTML (обычно <div> ) для хранения диаграммы. Вы должны передать в диаграмме ссылку на этот элемент, поэтому присвойте ему идентификатор, который вы сможете использовать для получения ссылки с помощью document.getElementById() . Все, что находится внутри этого элемента, будет заменено диаграммой при ее рисовании. Подумайте , следует ли явно указывать размер этого элемента <div> , а пока укажите размер диаграммы в HTML-коде <div> .

Каждая диаграмма поддерживает метод draw() , который принимает два значения: объект DataTable (или DataView ), содержащий ваши данные, и необязательный объект параметров диаграммы. Объект параметров не является обязательным, и вы можете игнорировать его или передать значение null, чтобы использовать параметры диаграммы по умолчанию.

После вызова draw() ваша диаграмма будет нарисована на странице. Вам следует вызывать метод draw() каждый раз, когда вы меняете данные или параметры и хотите обновить диаграмму.

Метод draw() является асинхронным: то есть он возвращает результат немедленно, но возвращаемый им экземпляр может быть доступен не сразу. Во многих случаях это нормально; диаграмма будет нарисована в конечном итоге. Однако если вы хотите установить или получить значения на диаграмме после вызова метода draw() , вам придется дождаться, пока он выдаст событие готовности, которое указывает на то, что оно заполнено. Мы рассмотрим прослушивание событий на следующей странице.

Поиск неисправностей

Если ваша диаграмма не отображается на странице, вот несколько подходов, которые могут помочь вам решить ваши проблемы:

  • Ищите опечатки. Помните, что JavaScript — язык, чувствительный к регистру.
    • Используйте отладчик JavaScript. В Firefox вы можете использовать консоль JavaScript, отладчик Venkman или надстройку Firebug . В Chrome вы можете использовать инструменты разработчика (Shift + Ctl + J).
  • Выполните поиск в группе обсуждения API визуализации Google . Если вы не можете найти сообщение, отвечающее на ваш вопрос, опубликуйте свой вопрос в группе вместе со ссылкой на веб-страницу, демонстрирующую проблему.

Больше информации