Методы рисования диаграмм

На этой странице перечислены различные способы создания экземпляров и рисования диаграмм на странице. Каждый метод имеет преимущества и недостатки, перечисленные ниже.

Содержание

  1. диаграмма.draw()
  2. ДиаграммаОбертка
  3. НарисоватьДиаграмму()
  4. Больше информации

диаграмма.draw()

Это основной метод, описанный в Hello Chart! пример в этой документации. Вот основные шаги:

  1. Загрузите загрузчик библиотеки gstatic, библиотеки Google Visualization и библиотеки диаграмм.
  2. Подготовьте свои данные
  3. Подготовьте любые варианты диаграмм
  4. Создайте экземпляр класса диаграммы, передав дескриптор элемента контейнера страницы.
  5. При желании зарегистрируйтесь, чтобы получать любые события графика. Если вы собираетесь вызывать методы на графике, вам следует прослушивать событие «готово».
  6. chart.draw() , передав данные и параметры.

Преимущества:

  • Вы имеете полный контроль над каждым этапом процесса.
  • Вы можете зарегистрироваться, чтобы прослушивать все события, происходящие на графике.

Недостатки:

  • Подробный
  • Вы должны явно загрузить все необходимые библиотеки диаграмм.
  • Если вы отправляете запросы, вам необходимо вручную реализовать обратный вызов, проверить успешность, извлечь возвращенный DataTable и передать его в диаграмму.

Пример:

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

      // 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 our data table.
        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.
        chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        google.visualization.events.addListener(chart, 'select', selectHandler);
        chart.draw(data, options);
      }

      function selectHandler() {
        var selectedItem = chart.getSelection()[0];
        var value = data.getValue(selectedItem.row, 0);
        alert('The user selected ' + value);
      }

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

ДиаграммаОбертка

ChartWrapper — это удобный класс, который обрабатывает загрузку всех соответствующих библиотек диаграмм, а также упрощает отправку запросов к источникам данных инструментов диаграмм.

Преимущества:

  • Гораздо меньше кода
  • Загружает все необходимые библиотеки диаграмм.
  • Значительно упрощает запросы к источникам данных за счет создания объекта Query и обработки обратного вызова за вас.
  • Передайте идентификатор элемента контейнера, и он вызовет getElementByID.
  • Данные можно отправлять в различных форматах: как массив значений, как литеральную строку JSON или как дескриптор DataTable

Недостатки:

  • ChartWrapper в настоящее время распространяет только события выбора, готовности и ошибки. Чтобы получать другие события, вы должны получить дескриптор завернутой диаграммы и подписаться на нее. Примеры см. в документации ChartWrapper .

Примеры:

Ниже приведен пример гистограммы с локально созданными данными, заданными в виде массива. Вы не можете указать метки диаграммы или значения даты и времени, используя синтаксис массива, но вы можете вручную создать объект DataTable с этими значениями и передать его в свойство dataTable .

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'ColumnChart',
          dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                      ['', 700, 300, 400, 500, 600, 800]],
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw();
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Вот пример линейной диаграммы, которая получает данные путем запроса к электронной таблице Google. Обратите внимание, что коду не требуется обрабатывать обратный вызов.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()

        // No query callback handler needed!
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

В сочетании с autoloading это может привести к очень компактному коду:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Использование редактора диаграмм с ChartWrapper

Вы можете использовать диалоговое окно «Редактор диаграмм», встроенное в таблицы Google, для создания диаграммы, а затем запросить сериализованную строку ChartWrapper , представляющую диаграмму. Затем вы можете скопировать и вставить эту строку и использовать ее, как описано выше в ChartWrapper .

Вы можете встроить редактор диаграмм на свою страницу и предоставить пользователям методы для подключения к другим источникам данных и возврата строки ChartWrapper . Дополнительную информацию см. в справочной документации ChartEditor .

НарисоватьДиаграмму()

DrawChart — это глобальный статический метод, который обертывает ChartWrapper .

Преимущества:

  • То же, что и ChartWrapper , но немного короче в использовании.

Недостатки:

  • Не возвращает дескриптор оболочки, поэтому вы не можете обрабатывать какие-либо события.
<DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);
      function drawVisualization() {
        google.visualization.drawChart({
         "containerId": "visualization_div",
         "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
         "query":"SELECT A,D WHERE D > 100 ORDER BY D",
         "refreshInterval": 5,
         "chartType": "Table",
         "options": {
            "alternatingRowStyle": true,
            "showRowNumber" : true
         }
       });
      }
    google.charts.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

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