구글 차트 > API

• 목록

<script src="https://www.gstatic.com/charts/loader.js"></script>

 <script>
 google.charts.load("current", {packages:['corechart']});
 google.charts.setOnLoadCallback(columnChart);

  function columnChart() {
    var data = google.visualization.arrayToDataTable([
      ["Element", "Density", { role: "style" } ],
      ["Copper", 8.94, "#b87333"],
      ["Silver", 10.49, "silver"],
      ["Gold", 19.30, "gold"],
      ["Platinum", 21.45, "color: #e5e4e2"]
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns(
      [0, 1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" }, 2]);

    var options = {
      title: "Density of Precious Metals, in g/cm^3",
      width: 980,
      height: 600,
      bar: {groupWidth: "95%"},
      legend: { position: "none" },
    };
    var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
    chart.draw(view, options);
 }
 </script>

 <div id="columnchart_values" style="width: 980px; height: 600px;"></div>



 <script>
 google.charts.setOnLoadCallback(drawChart);

 function drawChart() {
  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]
  ]);

  var options = {'title':'How Much Pizza I Ate Last Night', is3D: true,};

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, options);
 }
 </script>

 <div id="chart_div" style="width:980px; height:600px;"></div>