Diagramm anpassen

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

 

Optionen angeben

Jedes Diagramm bietet viele anpassbare Optionen, darunter Titel, Farben, Linienstärke, Hintergrundfüllung und so weiter. Obwohl das Diagramm-Tools-Team intensiv an der Darstellung des Standarddiagramms gearbeitet hat, sollten Sie Ihr Diagramm anpassen, z. B. um Labels für Labels oder Achsen hinzuzufügen.

Sie können benutzerdefinierte Optionen für Ihr Diagramm festlegen, indem Sie ein JavaScript-Objekt mit den Eigenschaften option_name/option_value definieren. Verwenden Sie die in der Diagrammdokumentation aufgeführten Optionsnamen. In der Dokumentation jedes Diagramms sind verschiedene anpassbare Optionen aufgeführt. Die Optionen für das Kreisdiagramm umfassen beispielsweise „Legende“, „Titel“ und „is3D“. Alle Optionen haben einen dokumentierten Standardwert.

Mit dem folgenden Objekt werden die Legendenposition, der Diagrammtitel, die Diagrammgröße und eine 3D-Option für ein Kreisdiagramm festgelegt:

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

Aktualisieren Sie das Objekt „options“ im Beispiel oben mit diesen Werten, um zu sehen, wie sie sich auf das Diagramm auswirken.

Diagrammgröße angeben

Eine häufig verwendete Option ist die Höhe und Breite des Diagramms. Sie können die Diagrammgröße an zwei Stellen angeben: im HTML-Code des Container-Elements <div> oder in den Diagrammoptionen. Wenn Sie die Größe an beiden Stellen angeben, wird im Diagramm normalerweise die in der HTML angegebene Größe verwendet. Wenn Sie keine Diagrammgröße im HTML-Code oder als Option angeben, wird das Diagramm möglicherweise nicht richtig gerendert.

Es hat Vorteile, die Größe an einem der beiden Orte anzugeben:

  • Größe in HTML angeben: Das Laden und Rendern eines Diagramms kann einige Sekunden dauern. Wenn die Größe des Diagrammcontainers bereits in HTML angepasst ist, springt das Seitenlayout nicht, wenn das Diagramm geladen wird.
  • Größe als Diagrammoption festlegen: Wenn die Diagrammgröße im JavaScript liegt, können Sie den JavaScript-Code kopieren und einfügen oder serialisiert, speichern und wiederherstellen und die Größe des Diagramms konsistent ändern.

 

Weitere Informationen