DigtalBloomStudio

Google Charts

top画像
Menu

円グラフ

円グラフカスタム
JavaScript Libraries参考サイトURL

Google製の無料グラフ描画ライブラリ
様々な種類のグラフが製作できる

GoogleCharts

円グラフ

GoogleCharts 
  
  HTML
  <div id="chart-div"> </div>

  JavaScript
  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);
  }

  CSS
  Google Charts 円グラフ
  #chart-div {
    width: 100%;
    max-width: 600px;
    height: 400px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

円グラフカスタム

GoogleCharts 
  
  HTML
  <div id="piechart_3d" style="max-width: 900px; height: 400px;"> </div>

  JavaScript
  google.charts.load("current", {packages:["corechart"]});
  google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['お金', 50],
        ['恋人', 40],
        ['自由', 30],
        ['楽しい', 30],
        ['やりがい', 10]
      ]);

      var options = {
        title: '3D表示の円グラフ',
        is3D: true,
      };

      var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
      chart.draw(data, options);
  }

  CSS
  #piechart_3d {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
Top