Techniki rysowania

Na tej stronie przedstawiamy różne sposoby tworzenia instancji na wykresie. Każda metoda ma swoje zalety i wady.

Spis treści

  1. schemat.draw()
  2. ChartWrapper
  3. DrawChart()
  4. Więcej informacji

chart.draw()

Oto podstawowa metoda opisana w przykładowym wykresie w tej dokumentacji. Oto podstawowe czynności:

  1. Wczytaj biblioteki biblioteki gstatic, wizualizację Google i biblioteki wykresów
  2. Przygotowywanie danych
  3. Przygotuj opcje wykresu
  4. Utwórz instancję klasy wykresu, przekazując uchwyt do elementu kontenera strony.
  5. Opcjonalnie zarejestruj się, aby otrzymywać wszelkie zdarzenia związane z wykresem. Jeśli chcesz wywoływać metody na wykresie, należy nasłuchiwać zdarzenia „ready”.
  6. Zadzwoń pod numer chart.draw(), przekazując dane i opcje.

Zalety:

  • Masz pełną kontrolę nad każdym etapem tego procesu.
  • Możesz zarejestrować się, by nasłuchiwać wszystkich zdarzeń zgłaszanych przez wykres.

Wady:

  • Szczegółowe
  • Musisz samodzielnie wczytać wszystkie wymagane biblioteki wykresów.
  • Jeśli wysyłasz zapytania, musisz ręcznie zaimplementować wywołanie zwrotne, sprawdzić skuteczność, wyodrębnić zwrócone wartości DataTable i przekazać je na wykres.

Przykład:

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

Grafrap

ChartWrapper to klasa wygodnej obsługi, która ładuje wszystkie odpowiednie biblioteki wykresów i upraszcza wysyłanie zapytań do źródeł danych narzędzi do wykresów.

Zalety:

  • Znacznie mniej kodu
  • Wczytuje wszystkie wymagane biblioteki wykresów
  • Tworzenie obiektów Query i obsługa wywołań zwrotnych znacznie ułatwia wykonywanie zapytań do źródeł danych
  • Przekaż identyfikator elementu kontenera, a wywoła on metodę getElementByID.
  • Dane można przesyłać w różnych formatach: jako tablica wartości, w postaci ciągu znaków literału JSON lub jako nick DataTable

Wady:

  • ChartWrapper obecnie rozpowszechnia tylko zdarzenia wyboru, gotowych i błędów. Aby otrzymywać informacje o innych zdarzeniach, musisz uzyskać dostęp do opakowanego wykresu i zasubskrybować wydarzenia w tej sekcji. Przykłady znajdziesz w dokumentacji ChartWrapper.

Przykłady:

Oto przykład wykresu kolumnowego z lokalnie utworzonymi danymi określonymi jako tablica. Nie możesz określać etykiet wykresu ani wartości daty i godziny za pomocą składni tablicy, ale możesz ręcznie utworzyć obiekt DataTable z tymi wartościami i przesłać go do właściwości 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>

Oto przykładowy wykres liniowy, który pobiera dane, wysyłając zapytanie do arkusza kalkulacyjnego Google. Pamiętaj, że kod nie musi obsługiwać wywołania zwrotnego.

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

W połączeniu z automatycznym wczytywaniem może to być bardzo kompaktowy kod:

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

Korzystanie z edytora wykresów za pomocą ChartWrapper

Podczas projektowania wykresu możesz użyć okna dialogowego edytora wykresów dostępnego w arkuszach kalkulacyjnych Google, a następnie poprosić o zserializowany ciąg znaków ChartWrapper, który reprezentuje wykres. Następnie możesz skopiować i wkleić ten ciąg znaków i użyć go w sposób opisany powyżej w ChartWrapper.

Możesz umieścić edytor wykresów na swojej stronie, aby udostępnić użytkownikom metody łączenia się z innymi źródłami danych i zwracać ciąg znaków ChartWrapper. Więcej informacji znajdziesz w dokumentacji referencyjnej ChartEditor.

 

Narysuj()

DrawChart to globalna metoda statyczna, która opakowuje ChartWrapper.

Zalety:

  • Taka sama jak w ChartWrapper, ale nieco krótsza.

Wady:

  • Nie zwraca nic do kodu, więc nie możesz obsługiwać żadnych zdarzeń.
<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>

Więcej informacji