[Google Charts]散布図を作成する
Google Chartsで散布図を作成するサンプルです。散布図は縦軸、横軸の二つの項目の値をプロットしたものです。二つの項目の相関関係(2つの値の関連性)を把握する事ができます。
サンプル
散布図のサンプルです。
サンプルコード
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> // ライブラリのロード // name:visualization(可視化),version:バージョン(1),packages:パッケージ(corechart) google.load('visualization', '1', {'packages':['corechart']}); // グラフを描画する為のコールバック関数を指定 google.setOnLoadCallback(drawChart); // グラフの描画 function drawChart() { // 配列からデータの生成 var data = google.visualization.arrayToDataTable([ ['数学', '物理'], [11, 11], [15, 25], [25, 40], [30, 31], [42, 47], [52, 47], [61, 68], [75, 78], [83, 72], [90, 87], [100, 96] ]); // オプションの設定 var options = { title: '物理と数学の点数による相関関係', hAxis: {title: '数学の点数'}, // 水平の説明, vAxis: {title: '物理の点数'}, // 垂直の説明 legend: 'none' // 凡例なし }; // 指定されたIDの要素に散布図を作成 var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); // グラフの描画 chart.draw(data, options); } </script> </head> <body> <!-- グラフの描画エリア --> <div id="chart_div" style="width: 100%; height: 350px"></div> </body> </html>
サンプルの解説(Javascript)
1. google.load()でライブラリをロードします。
2. google.setOnLoadCallback(drawChart)でコールバックを設定します。
3. コールバック先のdrawChart()でグラフを描画します。
<データの生成>
サンプルの書式を参考に改変すれば、データを増減できます。データを生成する方法はarrayToDataTable()とDataTable()の2種類あります。共に見出し部分は「'(シングルクォーテーション)」または「"(ダブルクォーテーション)」で括る必要があります。
サンプルの解説(HTML)
Javascript側で指定した「id=chart_div」の要素を使用して
<div id="chart_div" style="width: 100%; height: 350px"></div>
でグラフの描画エリアを指定します。widthやheightなどは自由に変更できます。
グラフ関連記事の目次
出典
ここで公開されているサンプルはGoogle Charts(英語)で公開されているコードにコメントなどを付加してます。
スポンサーリンク
関連記事
公開日:2015年04月01日
記事NO:00617
この記事を書いた人
![]() | 💻 ITスキル・経験 サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。 画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ |
プチモンテ代表、アーティスト名:プチモンテ | |
🎵 音楽制作 BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は叙情詩、叙情的な楽曲が多い。楽曲制作は2023年12月中旬 ~ |
オリジナル曲を始めました✨
YouTubeで各楽曲を公開しています🌈
https://www.youtube.com/@petitmonte