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ć z niej instancję draw().

Tworzenie instancji wykresu

Każdy typ wykresu jest oparty na innej klasie wymienionej w dokumentacji wykresu. Na przykład wykres kołowy został utworzony na podstawie klasy google.visualization.PieChart, wykres słupkowy – na podstawie klasy google.visualization.BarChart itd. Zarówno wykres kołowy, jak i słupkowy są zawarte w pakiecie Core Graph, który został wczytany na początku tego samouczka. Jeśli jednak masz na stronie mapę drzewa lub mapę geograficzną, musisz dodatkowo wczytać pakiety „treemap” i „geomap”.

Konstruktory wykresów Google pobierają jeden parametr: odwołanie do elementu DOM, w którym rysowana jest wizualizacja.

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

Narysuj wykres

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

Strona musi mieć element HTML (zwykle <div>), by można było przechowywać wykres. Musisz przekazać do wykresu odwołanie do tego elementu, więc przypisz go do identyfikatora, którego możesz użyć do pobrania odwołania za pomocą document.getElementById(). Wszystkie dane wewnątrz tego elementu zostaną zastąpione wykresem po narysowaniu. Zastanów się, czy powinieneś ustawić rozmiar <div> dla elementu, 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 znajdują się dane, oraz opcjonalny obiekt opcji wykresu. Obiekt „opcja” nie jest wymagany. Możesz go zignorować lub przekazać wartość null, by użyć opcji domyślnych wykresu.

Gdy wywołasz funkcję draw(), wykres zostanie wyświetlony na stronie. Wywołuj metodę draw() za każdym razem, gdy zmieniasz dane lub opcje i chcesz zaktualizować wykres.

Metoda draw() jest asynchroniczna. Oznacza to, że zwracana jest natychmiast, ale zwracana instancja może nie być od razu dostępna. W wielu przypadkach nie ma problemu. Wykres zostanie w przyszłości narysowany. Jeśli jednak po wywołaniu wartości draw() chcesz ustawić lub pobrać wartości, musisz poczekać, aż zdarzenie zwróci polecenie gotowe, co oznacza, że zostało wypełnione. Na następnej stronie omówimy słuchanie zdarzeń.

Rozwiązywanie problemów

Jeśli wykres nie zarysuje się na stronie, oto kilka sposobów, które pomogą Ci rozwiązać problemy:

  • Sprawdź, czy nie ma literówek. Pamiętaj, że w języku JavaScript rozróżniana jest wielkość liter.
    • Użyj debugera JavaScriptu. W Firefoksie możesz korzystać z konsoli JavaScript, debugera Venkman lub dodatku Firebug. W Chrome możesz używać narzędzi dla programistów (Shift + Ctl + J).
  • Przeszukaj grupę dyskusyjną Google wizualizacji interfejsu API. Jeśli nie możesz znaleźć posta z odpowiedzią na swoje pytanie, opublikuj pytanie w grupie wraz z linkiem do strony internetowej, na której widać występujący problem.

 

 

 

Więcej informacji