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

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

Содержание

  1. диаграмма.draw()
  2. ChartWrapper
  3. РисоватьДиаграмму()
  4. Дополнительная информация

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

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

  1. Загрузите загрузчик библиотеки gstatic, визуализацию Google и библиотеки диаграмм.
  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

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>

В сочетании с автозагрузкой это может сделать код очень компактным:

<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>

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