このページの2つのバージョン間の差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン |
| google_chart_apiの使い方 [2021/05/31 07:31] – 133.11.144.10 | google_chart_apiの使い方 [Unknown date] (現在) – 削除 - 外部編集 (Unknown date) 127.0.0.1 |
|---|
| ===== 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);'' ：描画メソッドの呼び出し | |
| |
| ===== 100％積み上げ横棒グラフの作成 ===== | |
| |
| [[https://www.finddevguides.com/Googlecharts-bar-percent]] | |
| |
| - 描画用インスタンスを作成する時に、BarChartを使用する | |
| - 通常の棒グラフと列と行を反転させることで積み上げグラフになる。 | |
| - オプションで''isStacked: 'percent' ''を使用することで100％グラフになる。 | |
| |