google_chart_apiの使い方

https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/gallery/piechart.html

  • <script src=“https://www.gstatic.com/charts/loader.js”></script>でGoogle Chart APIを読み込む
  • ブラウザ上でグラフを書く関数を作成(以下は関数の中身)
  • google.charts.load('current', {packages: ['corechart']}); :パッケージをロードする
  • google.charts.setOnLoadCallback(drawChart); :コールバック関数の登録
  • コールバック関数を実装する
  • var data = new google.visualization.arrayToDataTable([])の引数にリストでHeaderや値を入れていく
  • オプションはオブジェクトで作成
  • var chart = new google.visualization.PieChart(document.getElementById('target')); :描画用インスタンスの生成
  • chart.draw(data, options); :描画メソッドの呼び出し

https://www.finddevguides.com/Googlecharts-bar-percent

  • 描画用インスタンスを作成する時に、BarChartを使用する
  • 通常の棒グラフと列と行を反転させることで積み上げグラフになる。
  • オプションでisStacked: 'percent' を使用することで100%グラフになる。
  • オプションでlegend: 'none' を指定
  • google_chart_apiの使い方.1622446334.txt.gz
  • 最終更新: 2021/05/31 07:32
  • by 133.11.144.10