■Google Chart Tools で曲線を描く方法
...メニューに戻る ...Excel他のメニューに戻る
≪HTMLのHEAD部分に書く内容≫
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(chart_3);
function chart_3()
{var data3 = google.visualization.arrayToDataTable
([
[ '', ''],
[10,10 ],
[20,0 ],
[30,30 ]

]);
var options1 =
{ title: '散布図1',
legend: 'none'
};
var chart1 = new google.visualization.ScatterChart(document.getElementById('scatter1'));
chart1.draw(data3, options1);
}

</script>
≪BODY部分に書く内容≫
<div id="scatter1" style="width:300px; height:200px;"></div>
≪≫
/* ···1··· */
/* ···2··· */
/* ···3··· */
/* ···4··· */
/* ···5··· */
/* ···6··· */
/* ···7··· */

/* ···8··· */
/* ···9··· */
/* ···10··· */
/* ···11··· */
/* ···12··· */
/* ···13··· */
/* ···14··· */
/* ···15··· */
/* ···16··· */
/* ···17··· */
/* ···18··· */
/* ···19··· */

/* ···20··· */
≪≫
/* ···21··· */
実際の見え方
≪図1≫
≪図2≫
≪図3≫
■はじめに
 この文書は,筆者自身のための個人用メモです.Google Chart Toolsについては英文の解説がありますが,筆者は英語があまり得意ではなく,翻訳するのに時間がかかるため,いつでも読めるように要点をまとめたものです.権威付けは何もありませんし,ほかの誰かが点検した訳でもありませんが,筆者が理解した内容を筆者が後日参照し易い形にしています.

■散布図でグラフが描ける仕組み
 散布図は,右≪図1≫のように(x,y)座標の対が与えられたときに,これらの点をxy平面上に表示するものです.…右図の例では,(10,10), (20,0), (30,30), (40,35)の4個の座標が与えられた場合に,これを散布図に示したものです.
 基本の散布図は上記のように点を散りばめたもので,統計データの分布状況を見たりするときによく使われますが,その応用としてWeb上のHTMLファイルで「あらかじめ作成した画像データ」を使わずに「数値データだけで曲線を描く」ことができます.
 「個々の点を表示せず」「点を線で結ぶ」という表示方法を選び,さらに,折れ線ではなく「滑らかな線で結ぶ」を指定しすると,≪図2≫のようなグラフになります.
 厳密に正確な代数曲線を希望されるかもしれませんが,コンピュータの画面では画素数が限られており,今のところせいぜい横2000×縦1000ドット程度なので,目には曲線に見えているものも点の数が多いだけです.したがって,右≪図2≫のように縦横200ドットの範囲に描いた曲線では,点の総数が数十もあれば十分滑らかな曲線になります.
 右≪図3≫はリサージュ曲線
x=cos
y=sin
を点の数63個で描いたものです.

■Google Chart Toolsを利用するために必要なもの
 Google Chart Toolsで散布図(したがって,ここではグラフ)を描くには,ネットにつながっているコンピュータでメモ帳のようなテキストエディタが必要です.
 できあがったHTMLファイルはローカル(自分のPCの内部にある)ファイルであっても,そのPCがネットにつながっていてば作動テストはできます.
 利用方法を調べる場合,検索でGoogle Chart APIというのが出てくることがありますが,これは以前のバージョンで,この頁の解説とは使い方が異なります.

■Google Chart Toolsで散布図を描くには
 ブラウザで読めるHTMLファイルを作るには,幾つかの決まりごとを書かなければなりませんが,これはとても覚えられないので1つの原型をコピーして使うだけです.(覚えていても,筆者のように老眼になると,aと隣にあるsを押し間違う,コロンとその隣のセミコロンを押し間違うようなことはざらにあるので,能力を過信せずに実績のあるファイルのコピペで間に合わすのがよいと思う.)
 必要ならば,次のコードを画面上でドラッグ&コピーして,各自のテキストエディタのファイル上に貼りつけるとよいでしょう.
(1つだけ注釈:5行目はInternet Explorerの新しいバージョンで読むと,画面が崩れるような場合にInternet Explorer 7.x互換モードで働くようにするためのまじないです.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE> * * *</TITLE>

</HEAD>
<BODY>

</BODY>
</HTML>
 とりあえず,作動チェックするには,上記の<TITLE> * * *</TITLE>と</HEAD>の間(HEADの内部)に,この頁の先頭にあるコードのうち1行目から20行目までをコピー&貼り付けします.次に,<BODY>と</BODY>の間に21行目をコピー&貼り付けをし,abc.htmlのように半角英数字で保存します.ブラウザでそのファイルを見たときに,≪図1≫のような散布図になっていれば,後は自分の目的に合うように書き換えます.

 javascriptはHTMLよりも気難しく,1文字違うだけ(例えばカンマが1つ多いだけ,少ないだけ)でもその頁全体が表示されないことがあります.間違いは誰にでも起こります.間違ってい箇所を示すには「デバッグモード」にしておきます.裏側でデバッガを働かせておいてブラウザで再読み込みをします.ただし,テキストエディタで訂正しただけではブラウザに反映されません.毎回,ファイルとして上書きしてから,ブラウザで再読み込みする必要があります.
 Internet Explorer, Chrome, Firefoxでは,F12キーを押すと下の方のウィンドウにコンソールが表示され,何行目(の何個目の語句)が間違ってるかが示されるようになっています.(コンピュータによる構文チェックなので,実際にプログラムを直す必要のある箇所が,矛盾の起きた箇所よりも前にある場合もあります.)
 Safariでは,画面上端の右にあるひまわり(歯車?)のようなアイコンをクリック→設定→詳細→下の方にある[メニューバーに”開発”メニューを表示]をチェック→閉じる,開発メニュー→エラーコンソールを表示→下の方のウィンドウに赤字で示されます.
 

■スクリプト部分の補足説明・・・以下の説明はGoogleの説明を元にしていますが,元の英文にない筆者独自の解釈が含まれる場合があります.
 説明し易いように行番号を/ * 1 */の形で示していますが,実際に書くときはこれは不要です.
 元のプログラムは,C言語の創始者:カーニハン&リッチースタイルで関数名やif分の直後に中かっこの左半分を書いていますが,筆者は点検のときの見やすさを優先して,論理的に対となる中かっこが縦に並ぶようにしています.
(1行目〜3行目)
 Google Chart Toolsのコアチャートを利用するには,1行目〜3行目は必須です.
 2行目から始まるjavascript環境は,20行目まで届いています.20行目の</script>で閉じるのを忘れないようにします.

(4行目〜5行目)
 1つの頁の中で1つのグラフを表示する場合には,赤で示した関数名chart_3を省略することができますが,2つ以上のグラフを表示するときはGoogleのコールバックする関数名が関数定義に使用された名前(function abc()の形で書かれる部分abcの部分.半角英字で始まり,空白がなく,2文字目以降は数字やアンダーバーも使える)と対になっていなければなりません.
 この頁には,グラフが幾つも登場するので,順次chart_4, chart_5, chart_6, ...などと区別しています.

(6行目〜12行目)
 6行目で定義されるdata3(他にも13行目のoptions1,17行目のchart1の合計3個の変数が)18行目の実行文のために必要ですが,これら3個の変数は関数本体を定義する中かっこのブロックの中で,ローカル変数として定義されているので(var ...となっています)他のグラフを定義する別の関数で同じ名前の変数が使われていても,互いに読まれることも書き換えられることもありません.
 したがって,Google Chart Toolsのサンプルコードでは,すべてvar data, var optins, var chartとされていますが,ここではこれらの名前がユーザが命名できる名前であるが,その名前が各々18行目の実行文と照応していなければならないということを注意的に示したものです.

(7行目〜12行目)

 散布図を作成するために渡されるのは2次元配列で[ ] , [ ], ..., [ ]という外側の配列の中に更に[x座標,y座標]という配列が入った形をしています.ここでは,8行目〜11行目までの灰色で示したデータ(もちろん,散布図の点の個数が増えれば数十〜数百行になります)だけを書き換えると決めると安全です.
≪図4≫
 [注] 少々,取り扱いが難しいのが8行目の
.[ '', ''],
です.ここには,意味から言えば,[ 'x座標の値', 'y座標の値'], のように以下の9行目〜11行目に書かれる数値データの配列に対する「列見出し」が入ることになるのですが,
(1) このデータは使わないときでも,省略できません.何も書かないときは,x成分,y成分ともシングルクォート[SHIFT+7]2個で囲みます.(ダブルクォート1個[SHIFT+2]ずつではありません.)
(2) このデータは,シングルクォートで囲った「文字列型」のものでなければならず,[ 3, 4], のような数値型のデータではいけません.
(3) 簡単な散布図(つまり1つの系列の散布図)のときに,ここに何らかの文字列を書き込んでも,グラフ上は表示されません.≪図2≫≪図3≫のx, yという軸タイトルは,8行目のデータが表示されるのではなく,options1hAxis: {title: 'x'}, vAxis: {title: 'y'},と指定したときの文字列が表示されます.
(5) 配列の先頭にあるこのデータは,複数グループの散布図を色や形で分けて表示するときに,汎例を示した場合に表示されます.(≪図4≫参照:詳細は後)
 要素を書き並べるときは,カンマで区切らなければならないので,8行目,9行目,10行目の末尾には半角カンマが必要ですが,最後の要素の後にはカンマは書かないので,11行目の末尾にはカンマは書きません.要素の区切り方については,options1についても同様です.

(12行目,16行目,18行目)
 6行目から12行目は,Web頁開発者の点検がし易いようにカンマ毎に改行していますが,ブラウザがコードの意味を解釈するときには,これらは1行で書かれていても全く同じ(速度は速いかも)です.6行目から12行目に書かれているのは,1つのローカル変数option1の宣言と同時に行う初期化です.このような1つの実行文はセミコロン(;)で終わります.
 同様にして,13行目から16行目は1つのローカル変数chart1の宣言と同時に行う初期化の実行文で,セミコロンで終わらなければなりません.17行目も同様です.
 このようにして,関数chart_3の中には,3つの変数の宣言・初期化が行われ,その結果を使って,chart1.draw();というメソッド(オブジェクトの中で定義されている関数)が実行されるという形になっています.
 だから,この関数chart_3の中には,の中には,セミコロンが4個あり,どのセミコロンも省略できません.

(17行目)
 ユーザが作成したデータから「散布図として表示する」ということを指定しているのが,17行目のScatterChartという決まった語句で,この語句を変更すると(データの形が対応していれば)別の形のグラフになります.・・・他には,縦棒グラフ:ColumnChart,横棒グラフ:BarChart,折れ線グラフ:LineChart,円グラフ:PieChartなどがあります.
 これをどの場所に生じするのかを指定するのがscatter1という語句です.
 この文を実行するためには,HTMLファイルの<BODY>から</BODY>までの間のどこかに<div id="scatter1" style="..."></div>という記述がなければなりません.

■設定の変更

≪図5≫
○グラフの縦横のサイズを変更するには
 BODYに書く,<div id="ABC1" style="width:###px; height:###px;"></div>において,###の部分が横幅,縦幅を10進数のピクセル数(ドット数)で表したものなので,この部分を書き換えます.
 右の≪図5≫は,style="width:400px; height:200px;"としたものです.
○グラフのタイトル(表題)の設定を変更するには
 タイトルとして表示される文字列:title:に続くシングルクォートに囲まれた文字列がタイトルとして表示されます.右の≪図5≫は,グラフを定義する関数の中でoptions= { title: '三角関数のグラフ', ...と書き込んだ場合になっています.title: を省略した場合,title: '',のように空文字にした場合にはタイトルは表示されません.
 タイトルの文字色,フォントの色や大きさなど:
titleTextStyle:{ color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> },
 という項目をtitle: 'ABC',の次の行などに追加して,各々値を書き込みます.
 データ型として<string>となっている箇所にはシングルクォートで囲んだ文字列,<number>となっている箇所には10進数の数字,<boolean>となっている箇所にはシングルクォートで囲まない記号定数trueまたはfalseを記入します.
 colorには,'red'などの記号定数または'#ff0000'のように三原色を16進数256段階で表したものが使えます.
 fontNameにはフォントの種類を指定しますが,タイトルが日本語2バイト文字(漢字かな)の場合,fontNameに何を書いても明朝体で表示されるようです(2014.9.11現在:十分確認できていない).
 右の≪図5≫は,
var options =
{
. title: '三角関数のグラフ',
. titleTextStyle:{ color: '#0000ff', fontName: 'sans-serif', fontSize: 16, bold: true, italic: false},
.
};
としたものです.
≪図7≫
≪図6≫
○散布図を折れ線グラフにするには
 散布図のグラフを描くときに,オプションとして線を表示するようにできます.
 折れ線を表示するにはoptions= { ...}の中でlineWidth: 1,などと線の幅として0よりも多きな値を設定します.(省略すれば線幅0すなわち点だけを表示します.)
 点だけを表示する散布図では,データの並び方によって結果は変わりませんが,線を表示する場合には,データの並びの順に線が引かれます.
 右の≪図6≫ではデータは[10,10]→[20,0]→[30,30]の順に並んでおり,≪図7≫ではデータは[20,0]→[10,10]→[30,30]の順に並んでます.
 点の大きさはpointSize:7,のように設定できますが,pointSize:0,とすると「点なし線あり」となります.
 その他,点の大きさはpointSize:20などにより,点の形状はpointShape: 'triangle'などにより変更できます.
 線の色はcolors:['#ff0000'],とすると,赤になります.(1つの系列しかないので,値が1つしかない[配列]・・・複数系列あるときは['red','blue']などにより系列ごとの色が指定できる.)

≪図9≫
≪図8≫
○曲線のグラフにするには
 options= { ...}の中でlineWidth: 1,とすると,右≪図8≫のように折れ線で結ばれますが,さらにcurveType: 'function', を追加すると右≪図9≫のようになめらかな曲線で結ばれます.この程度の大きさの場合,点の個数7個でもcurveType: 'function', とすれば十分見られる曲線になることが分かります.
 右≪図9≫ではoptions= { ...}の部分を次のように設定しています.
var options =
{
title: '滑らかな線',
titleTextStyle:{ color: '#0000ff', fontSize: 16},
hAxis: {title: 'x'},
vAxis: {title: 'y'},
legend: 'none',
lineWidth: 1,
curveType: 'function',
colors:['#0000ff'],
pointSize: 0
};
...メニューに戻る ...Excel他のメニューに戻る