Schnelleinstieg

Hier ein einfaches Beispiel für eine Seite mit einem Kreisdiagramm:

Sie können das Snippet unten in eine HTML-Datei auf Ihrem Computer kopieren und in Ihrem Browser öffnen, um das Kreisdiagramm (siehe oben) zu sehen:

<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 corechart 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"></div>
  </body>
</html>

Wie sieht es mit einem Balkendiagramm aus?

Konvertieren Sie das Kreisdiagramm in ein Balkendiagramm, indem Sie im Code google.visualization.PieChart durch google.visualization.BarChart ersetzen und Ihren Browser neu laden. Möglicherweise ist die Legende „Slices“ abgeschnitten. Ändern Sie width von 400 in 500, speichern Sie die Datei und aktualisieren Sie den Browser neu, um das Problem zu beheben.