Narysuj wykres 

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

Ostatnim krokiem jest narysowanie wykresu. Najpierw musisz utworzyć instancję klasy wykresu, której chcesz użyć, a następnie wywołać dla niej draw().

Utwórz instancję wykresu

Każdy typ wykresu opiera się na innej klasie wymienionej w dokumentacji wykresu. Na przykład wykres kołowy jest oparty na klasie google.visualization.PieChart, wykres słupkowy – google.visualization.BarChart itd. Zarówno wykresy kołowe, jak i słupkowe są zawarte w pakiecie wykresów podstawowych, który został wczytany na początku tego samouczka. Jeśli jednak chcesz umieścić na stronie mapę drzewa lub wykres geograficzny, musisz dodatkowo wczytać pakiety „mapa drzewa” lub „geomapa”.

Konstruktory wykresów Google przyjmują pojedynczy parametr, czyli odniesienie do elementu DOM, w którym ma zostać rysowana wizualizacja.

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

Narysuj wykres

Po przygotowaniu danych i opcji możesz zacząć narysować wykres.

Strona musi zawierać element HTML (zwykle <div>), w którym można umieścić wykres. Musisz przekazać odniesienie do tego elementu na wykresie, więc przypisz mu identyfikator, który pozwoli Ci pobrać plik referencyjny za pomocą funkcji document.getElementById(). Wszystkie elementy wewnątrz tego elementu zostaną zastąpione wykresem podczas jego rysowania. Zastanów się, czy ten element <div> ma być jawnie określony, ale na razie określ rozmiar wykresu w kodzie HTML <div>.

Każdy wykres obsługuje metodę draw(), która przyjmuje 2 wartości: obiekt DataTable (lub DataView), w którym są przechowywane dane, i opcjonalny obiekt opcji wykresu. Obiekt options nie jest wymagany. Możesz go zignorować lub przekazać wartość null, by użyć domyślnych opcji wykresu.

Po wywołaniu funkcji draw() wykres zostanie narysowany na stronie. Należy wywoływać metodę draw() za każdym razem, gdy zmienisz dane lub opcje i chcesz zaktualizować wykres.

Metoda draw() jest asynchroniczna, czyli zwraca natychmiast, ale zwrócona instancja może nie być od razu dostępna. W wielu przypadkach jest to prawidłowe; wykres w końcu zostanie narysowany. Jeśli jednak chcesz ustawić lub pobrać wartości na wykresie po wywołaniu funkcji draw(), musisz poczekać na zgłoszenie zdarzenia gotowości, które oznacza, że pole jest wypełnione. Na następnej stronie omówimy nasłuchiwanie zdarzeń.

Rozwiązywanie problemów

Jeśli wykres nie jest rysowany na stronie, możesz rozwiązać problemy, korzystając z tych rozwiązań:

  • Sprawdź, czy nie ma literówek. Pamiętaj, że w języku JavaScript wielkość liter ma znaczenie.
    • Użyj debugera JavaScriptu. W Firefoksie możesz użyć konsoli JavaScript, Venkman Debugger lub dodatku Firebug. W Chrome możesz użyć narzędzi dla programistów (Shift + Ctl + J).
  • Przeszukaj grupę dyskusyjną interfejsu GoogleVisual API. Jeśli nie możesz znaleźć posta z odpowiedzią na Twoje pytanie, opublikuj je w grupie razem z linkiem do strony internetowej ilustrującej problem.

 

 

 

Więcej informacji