Dostosowywanie wykresu 

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

 

Określ opcje

Każdy wykres ma wiele opcji, które możesz dostosować, w tym tytuł, kolory, grubość linii, wypełnienie tła itp. Chociaż zespół narzędzi do tworzenia wykresów pracował nad domyślnym wyglądem wykresu, możesz chcieć dostosować wykres na przykład przez dodanie tytułów lub etykiet osi.

Określ niestandardowe opcje wykresu, definiując obiekt JavaScript o właściwościach option_name/option_value. Użyj nazw opcji podanych w dokumentacji wykresu. Dokumentacja każdego wykresu zawiera zestaw opcji, które można dostosować. Na przykład dostępne opcje wykresu kołowego to „legend”, „title” i „is3D”. Wszystkie opcje mają udokumentowaną wartość domyślną.

Ten obiekt określa pozycję legendy, tytuł wykresu, rozmiar wykresu oraz opcję 3D w przypadku wykresu kołowego:

var options = {
  'legend':'left',
  'title':'My Big Pie Chart',
  'is3D':true,
  'width':400,
  'height':300
}

Zaktualizuj te wartości w obiekcie options w powyższym przykładzie, by sprawdzić, jak wpływają one na wykres.

Określ rozmiar wykresu

Jedną z często wybieranych opcji jest wysokość i szerokość wykresu. Rozmiar wykresu możesz określić w 2 miejscach: w kodzie HTML kontenera <div> lub w opcjach wykresu. Jeśli podasz rozmiar w obu lokalizacjach, na wykresie zostanie zwykle zmniejszony rozmiar określony w kodzie HTML. Jeśli nie określisz rozmiaru wykresu w kodzie HTML lub jako opcję, wykres może nie zostać prawidłowo wyrenderowany.

Określenie rozmiaru w jednym lub drugim miejscu ma swoje zalety:

  • Określanie rozmiaru w kodzie HTML – wczytanie i wyrenderowanie wykresu może zająć kilka sekund. Jeśli kontener wykresu jest już odpowiednio dopasowany do rozmiaru w kodzie HTML, układ strony nie będzie przeskakiwał po wczytaniu wykresu.
  • Określanie rozmiaru jako opcji wykresu – jeśli rozmiar wykresu jest podany w kodzie JavaScript, możesz skopiować i wkleić albo zserializować, zapisać i przywrócić kod JavaScript z zastosowaniem spójnego rozmiaru wykresu.

 

Więcej informacji