Techniki rysowania wykresów

Ta strona zawiera listę różnych sposobów tworzenia i rysowania wykresów na stronie. Każda metoda ma zalety i wady, które wymieniono poniżej.

Spis treści

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

chart.draw()

To podstawowa metoda omówiona w przykładzie Hello Chart! w tej dokumentacji. Oto podstawowe czynności:

  1. Wczytaj bibliotekę 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ć zdarzenia wykresu. Jeśli zamierzasz wywoływać metody na wykresie, musisz nasłuchiwać zdarzenia „ready”.
  6. Wywołaj chart.draw(), przekazując dane i opcje.

Zalety:

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

Wady:

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

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>

ChartWrapper

ChartWrapper to klasa wygodna, która obsługuje wczytywanie wszystkich odpowiednich bibliotek wykresów, a także upraszcza wysyłanie zapytań do źródeł danych narzędzi Chart.

Zalety:

  • Znacznie mniej kodu
  • Wczytuje wszystkie wymagane biblioteki wykresów
  • Znacznie ułatwia wykonywanie zapytań dotyczących źródeł danych przez utworzenie obiektu Query i obsługę wywołania zwrotnego
  • Przekaż do niej identyfikator elementu kontenera, by wywołać metodę getElementByID.
  • Dane można przesyłać w różnych formatach: jako tablica wartości, ciąg literału JSON lub uchwyt DataTable.

Wady:

  • Funkcja ChartWrapper obecnie rozpowszechnia tylko zdarzenia wyboru, gotowości i błędu. Aby otrzymywać inne zdarzenia, musisz uzyskać uchwyt wykresu opakowanego i subskrybować tam zdarzenia. Przykłady znajdziesz w dokumentacji usługi ChartWrapper.

Przykłady:

Oto przykład wykresu kolumnowego z lokalnie skonstruowanymi danymi określonymi w postaci tablicy. Za pomocą składni tablicy nie można określić etykiet wykresu ani wartości daty i godziny, ale można ręcznie utworzyć obiekt DataTable z tymi wartościami i przekazać 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ład wykresu liniowego, który pobiera dane dzięki zapytaniu 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 doładowaniem kod jest bardzo kompaktowy:

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

Używanie edytora wykresów z narzędziem ChartWrapper

Aby zaprojektować wykres, możesz użyć okna edytora wykresów wbudowanego w Arkusze Google, a następnie poprosić o zserializowany ciąg znaków ChartWrapper reprezentujący wykres. Następnie możesz skopiować i wkleić ten ciąg i używać go w sposób opisany powyżej w sekcji ChartWrapper.

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

 

DrawChart()

DrawChart to globalna metoda statyczna, która obejmuje obiekt ChartWrapper.

Zalety:

  • Taki sam jak ChartWrapper, ale trochę krótszy w użyciu.

Wady:

  • Nie zwraca nicka do opakowania, 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