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żna dostosować, w tym tytuł, kolory, grubość linii, wypełnienie tła itd. Chociaż zespół narzędzi ds. wykresów ciężko pracował nad domyślnym wyglądem wykresu, możesz chcieć dostosować wykres, na przykład dodając do niego tytuły lub etykiety osi.

Określ opcje niestandardowe wykresu, definiując obiekt JavaScript za pomocą właściwości option_name/option_value. Użyj nazw opcji wymienionych w dokumentacji wykresu. Dokumentacja każdego wykresu zawiera zestaw możliwych do dostosowania opcji. Na przykład opcje dostępne na wykresie kołowym to „legend”, „title” i „is3D”. Wszystkie opcje mają udokumentowaną wartość domyślną.

Ten obiekt definiuje pozycję legendy, tytuł wykresu, rozmiar wykresu oraz opcję 3D wykresu kołowego:

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

Zaktualizuj obiekt „Opcje” w przykładzie powyżej, aby zobaczyć, jak wpływają one na wykres.

Określ rozmiar wykresu

Jedną z często stosowanych opcji jest wysokość i szerokość wykresu. Rozmiar wykresu możesz określić w 2 miejscach: w kodzie HTML elementu <div> kontenera lub w opcjach wykresu. Jeśli podasz rozmiar w obu lokalizacjach, wykres będzie ogólnie opierał się na rozmiarze określonym w kodzie HTML. Jeśli nie określisz rozmiaru wykresu w kodzie HTML lub jako opcję, wykres może nie być renderowany prawidłowo.

Wskazanie rozmiaru w jednym z tych miejsc ma swoje zalety:

  • Określanie rozmiaru w HTML-u – wczytanie i wyrenderowanie wykresu może potrwać kilka sekund. Jeśli kontener wykresu jest już w formacie HTML, układ strony nie przeskakuje podczas wczytywania wykresu.
  • Określanie rozmiaru jako opcji wykresu – jeśli rozmiar wykresu jest w pliku JavaScript, możesz go skopiować i wkleić, a także zserializować, zapisać i przywrócić kod JavaScript i spójnie zmienić jego rozmiar.

 

Więcej informacji