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

<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, который вы загрузили в начале этого руководства. Однако, если вы хотите, чтобы на вашей странице была древовидная карта или географическая диаграмма , вы должны дополнительно загрузить пакеты «древовидная карта» или «геокарта» .

Конструкторы диаграмм 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).
  • Найдите группу обсуждения Google Visualization API . Если вы не можете найти сообщение, отвечающее на ваш вопрос, опубликуйте свой вопрос в группе вместе со ссылкой на веб-страницу, демонстрирующую проблему.

Дополнительная информация