Google Charts Tool は、Coogleが公開しているャート作成のJavascriptライブラリで、ＰＣ側には何のインストールの必要もなく無料で利用できます。アプリケーションのダウンロードはないので、オンラインのＷｅｂ環境で利用するだけです。
折線グラフ、棒グラフ、円グラフなどよく用いられる形式以外に豊富なグラフをサポートしています。（
参照：
https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/gallery）
その仕様とサンプル例は、 https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/quick_startにあります。
このページは、それらを参考にしながら、理解したことをまとめたものです。
本ページの利用法
随所にある［実行］ボタンをクリックすると、別ページにチャートが表示されます。そのページの「ページのソースを表示する」によりソースコードを適当なファイルにコピーしてください。そのファイルを適宜手直しして（入力データの取り換えなど）ブラウザで開くと、求めるチャートが得られます。
折線グラフの例でコードの基本構成を示します。棒グラフや円グラフでも、この基本構成はほぼ同じで、利用者が記述するのは、通常はfunction drawChart(){ … } の部分だけになります。
［実行］(line01):以下のコードを実行したときの結果、折線グラフを別ウインドウに表示します。
（折線の点の部分にマウスを合わせるとｘとｙの値が表示されます。この機能は他のチャートでも同じです。）
グラフの外側を右クリックして「ページのソースを表示」させ、適当なファイルにコピーしてください。
<html>
<head>
// Google Charts を利用するＣＤＮ
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', // GoogleChartsの最新バージョン
{packages: ['corechart']} // 標準的なチャート種類全体を指定
); // 縦・横棒グラフでは packages: ['corechart', 'bar"] とする
google.charts.setOnLoadCallback(drawChart); // チャート作成関数名（任意名称）
function drawChart() { // チャート作成関数
// チャートの定義（入力データ）
var data = google.visualization.arrayToDataTable([ // 二次元の配列で指定（data の名称は任意）
['x', 'y1','y2'], // 自動的に最初列がＸ軸になる
[ 2, 4, 5],
[ 2.5, 2, 6],
[ 5, 6, 4],
[ 6, 4, 5],
[ 6.5, 5, 3],
[ 8, 4, 5]
]);
// チャートのオプション指定（連想配列の形式） optoons の名称は任意
var options = {width: 500, height:300, // チャート表示場所のサイズ（Bodyでの指定もできる）
lineWidth: 4, // 折線の太さ
colors: ['red', 'blue'], // 折線の色
title: 'line21: 複数折線グラフ',
hAxis: {title: 'x', // Ｘ軸ラベル
},
vAxis: {title: '観測値', // Ｙ軸ラベル
},
};
// チャートの作成・表示（LineChart は折線グラフの関数名。チャート種類により異なる）
var chart = new google.visualization.LineChart(document.getElementById('チャート表示場所'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="チャート表示場所"></div>
</body>
</html>
種類 関数名(chartの部分) packagesの部分
縦棒グラフ ColumnChart 'bar'
横棒グラフ BarChart 'bar'
散布図 ScatterChart
折れ線グラフ LineChart
面グラフ AreaChart
ヒストグラム Histogram
円グラフ・ドーナツ PieChart
参照： https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/reference#DataTable
入力データは、次の形式があります。
var data = google.visualization.DataTable() // 標準形式。きめ細かい指定に適しているが記述量が多い .arrayToDataTable([…]) // データを二次元配列として与える。本ページでは主にこれを用いる .ChartWrapper([…]) // さらに簡素化。作図の全情報をここで記述するシンプルで読みやすい利点があります。
次例のように、どの列がＸ軸になるのか明示的な指定がなく、Google Chartsが自動的に推測します。
要素が ' ' で囲まれた列があればその列、なければ先頭の列をＸ軸と推測します。
' ' で囲まれた列は数値と解釈しないので、次例でＸの要素を ' ' にするとＸ軸が等間隔になります。
var data = google.visualization.arrayToDataTable([ // 二次元の配列で指定（data の名称は任意）
['x', 'y1','y2'], // 自動的に最初列がＸ軸になる
[ 2, 4, 5],
[ 2.5, 2, 6],
[ 5, 6, 4],
[ 6, 4, 5],
[ 6.5, 5, 3],
[ 8, 4, 5] ],
false); // 先頭行が列名でないなら、これを追加
列名に多様な属性を指定するには、列の個数だけ { } で指定することができます。
var data = google.visualization.arrayToDataTable([
[ {id:'x', label: '製品', type: 'string'}, // id: 列の内部名称
{id:'y1', label: '特性１', type: 'number'}, // label: チャートでの表示文字列
{id:'y2', label: '特性２', type: 'number'} ], // 列の型：string、number、boolean、date
['A', 4, 5],
['B', 2, 6],
['C', 6, 4],
['D', 5, 3] ]);
データだけでなく、チャートの種類やoption などもまとめて記述だきます。記述が簡単になりますが、多様なオプション指定が必要なときは、かえって読みにくくなります。
function drawChart() {
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart', // グラフの種類
dataTable: [ // データテーブルの元となる二次元配列
['製品', '特性１', '特性２'],
['A', 4, 5],
['B', 2, 6],
['C', 6, 4],
['D', 4, 5],
['E', 5, 3],
['F', 4, 5]
],
options: {title: '会社業績'}, // option もここで記述
containerId: 'チャート表示場所'
});
chart.draw(); // 引数を持たない
}
［実行］(line02)
標準的な形式です。記述は複雑ですが、列・行・要素別に細かい指定ができます。
var data = new google.visualization.DataTable(); // フレームだけを宣言
// 列名だけを指定 データのtypeとlabel
data.addColumn('string', '製品');
data.addColumn('number', '特性１');
data.addColumn('number', '特性２');
// データ（行）の指定
data.addRows([
['A', 4, 5],
['B', 2, 6],
['C', 6, 4],
['D', 4, 5],
['E', 5, 3],
['F', 4, 5]
]);
［実行］(line03)
チャートの体裁を整えるには、次の機能があります。
options による設定。基本的な方法です。
series 系列別（列別）での指定。 options の内部です。
style 入力データでの指定。主に１系列の場合に使われます。
スタイルシートによる指定 GoogleChart は HTML, Javascript 上で動くので CSS で指定できます（ここでは省略）
参照： https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/customizing_charts
線や棒の色や軸補助線など、グラフの体裁に関する事項は、一般的には oputions で与えます。その一般形式を示します。
var options = {
lineWidth: 4, // 折線の太さ（全系列に適用）
colors: ['red', 'blue' …], // 折線の色（系列ごとに指定。１つだけだと全系列に適用）
hAxis: { // 水平軸対象 このように、入れ子構造になるものもある
title: "横軸のタイトル"
},
}
指定できるパラメタは、全てのチャートに共通のものもありますが、チャートの種類により無意味になるものもあります。
また、同じパラメタ名でも、その指定位置（入れ子の中など）で、異なる機能になることがあります。
積上げグラフ
isStacked: true, // 積上げグラフ
isStacked: 'percent', // 百分率になる
折線グラフの曲線化
curveType: 'function',
画面（チャート画面表示場所）のサイズ（必須。body の div で指定するなら不要）
width: 500. height: 300,
画面の枠
backgroundColor: {'yellow' // 全体の色省略可
fill:'yellow', // 内部塗りつぶし
stroke: 'red', // 枠線の色
strokeWidth: 4 // 枠線の太さ
}
チャート部分の枠
chartArea:{
backgroundColor: {'yellow', stroke:'red', strokeWidth: 4} // backgroundColorと同じ
}
全ての文字列表示
textStyle: {
color: 'blue',
fontName: "sans-serif",
fontSize: 11,
bold: true,
italic: false
}
全系列に適用。系列別指定はできない
pointShape: 'circle', // 点の形状 'square' 'triangle' 'star' 'diamond' 'polygon'
pointSize: 20, // 点の大きさ
lineWidth: 4, // 折線の太さ
lineDashStyle: [4, 2] // 破線の指定 [線長, 空白]
個別系列指定。全系列に適用するには [一つだけ] とする。その場合も [ ] も必要
colors: ['red', 'blue' …], // 点や棒の色
bar: { // 縦棒・横棒グラフに特有
groupWidth: "50%", // 全ての棒の幅
},
title: 'タイトル文字列',
titleTextStyle: {
color: "blue",
fontName: "sans-serif",
fontSize: 11,
bold: true,
italic: false
}
タイトルの表示位置指定はできないようです。
Ｘ軸
hAxis: {
title: 'Ｘ軸ラベル', // Ｘ軸ラベル
titleTextStyle: {color: 'red', // タイトルでのtitleTextStyleと同じ
…
}
minValue: 0, maxValue: 10, // チャート表示範囲
// 目盛りの設定
ticks: [0, 0.3, 0.6, 0.9, 1], // すべてのＸを与える
showTextEvery:5, // 目盛りを５きざみ
// 補助線
gridlines:{
color: 'gray',
count:7
}
// Ｘ軸の目盛り文字列がオーバーフローするとき
slantedText: true, // 斜め表示にする
slantedTextAngle:60, // その角度は６０度
showTextEvery: 5, // 表示を５きざみ
maxTextLines: 5,
maxAlternation: 10
}
// 100 - 200 で 10刻みにしたい場合
// minValue:110, maxValue:190, gridlines: {count:11 }
// minValue で指定した値は、実際には最小値から2番目の目盛り線になります。maxValueも同様
Ｙ軸
vAxis: {
// hAxis と同じ
// Axis 特有：複数系列があるので
0: { // 系列０固有の設定
title: 'y1', // hAxisと同様（軸関係を
…
},
1: { // 系列１固有の設定
title: 'y2',
…
}
}
両軸をまとめて、次のように記述することもできます。
axes: {
x: { hAxis と同じ }.
y: { vAxis と同じ }
}
legend: {
position: 'bottom', // 凡例の表示位置 'right', 'top', 'bottom', 'in'-グラフ内(左上), 'none'-非表示
maxLines: 2, // 凡例の最大行
textStyle: { color, fontName, fontSize, bold, italic}, // タイトルのパラメタと同じ
}
vAxis での「複数系列」のように、系列ごとに個別設定するのに series があります。options = { } の中に記述します。
series: {
0: { 系列０のオプション },
1: { 系列０のオプション },
2: { 系列０のオプション },
…
}
color, pointShape, lineWigth, lineDashStyle などが多くの機能が使えます。
例
series: { // 系列別のオプション指定
0: { // 系列０（y1）の仕様
color: 'red',
lineWidth: 4, // 線の指定
lineDashStyle: [4, 2]
},
1: { // 系列１（y2）の仕様
color: 'blue',
lineWidth: 2,
pointShape: 'star', // 点の指定
pointSize: 10
},
},
series:[
{targetAxisIndex:0}, // 第1系列は左のY軸を使用
{targetAxisIndex:1}, // 第2系列は右のY時を使用
],
［実行］(line06)
options ではなく、入力データの記述内に組み込むものもあります。１系列のときに用いられます。
棒グラフの個別棒の色指定
var data = google.visualization.arrayToDataTable([ // 二次元の配列で指定（data の名称は任意）
['製品','特性', { role: 'style' }], // { } で各棒のスタイル指定を宣言
['A', 4, ''], // デフォルト '' は必要
['B', 2, 'opacity: 0.2'], // 棒の色の透明度
['C', 6, 'color:green'], // 棒の色を変える
['D', 4, 'fill-color:yellow'], // 内部塗りつぶし
['E', 5, 'fill-color:yellow; stroke-color:red'], // 枠線の色
['F', 4, 'fill-color:yellow; stroke-color:red; stroke-width:4'] // 枠線の太さ
)
［実行］(column01)
（私が）よく用いられっる代表的なチャートのサンプルを掲げます。（あまり凝らない）通常の体裁を整えたものにしています。しかし、デフォルトでよいものは指定しないほうが適切です。
var options = {width: 500, height:300,
colors: ['red'], // 棒の色
bar: {groupWidth: "50%"}, // 全ての棒の幅
chartArea:{ backgroundColor: {stroke:'black', strokeWidth: 1} }, // チャートに枠を付けた
title: 'column11 単一縦棒グラフ ColumnChart',
titleTextStyle: { color: "blue", fontSize: 16}, // タイトルのフォント
hAxis: {title: 'Ｘ軸ラベル', titleTextStyle: {fontSize: 14}}, // Ｘ軸ラベル
vAxis: {title: 'Ｙ軸ラベル', titleTextStyle: {fontSize: 14}, // Ｙ軸ラベル
minValue: 0, maxValue: 6, ticks: [0, 1, 2, 3, 4, 5, 6], // Ｙ軸目盛り
gridlines:{color: 'gray', lineWidth: 1} // 補助線
},
legend: 'none' // 凡例を非表示
}
var chart = new google.visualization.ColumnChart(document.getElementById('チャート表示場所'));
chart.draw(data, options);
column11 とほぼ同じ。凡例をグラフの下に表示
legend: { position: 'bottom', maxLines: 2}, // 凡例を下に最大２行
column11 とほぼ同じ。options に次を加えるだけです。
isStacked: true, // ★★ 積上げグラフにする
isStacked: 'percent', // 百分率になる
縦棒グラフの関数 ColumnChart を BarChart に変更します。
var chart = new google.visualization.BarChart(document.getElementById('チャート表示場所'));
縦棒グラフでの hAxis と vAxis を入れ替えます。
var options = {
…
vAxis: {title: 'ｙ', titleTextStyle: {fontSize: 14}}, // 垂直軸ラベル
hAxis: {title: 'ｘ', titleTextStyle: {fontSize: 14}, // 水平軸ラベル
minValue: 0, maxValue: 6, ticks: [0, 1, 2, 3, 4, 5, 6],
gridlines:{color: 'gray', lineWidth: 1},
…
},
var options = {width: 500, height:300, // チャート表示場所のサイズ（Bodyでの指定もできる）
pointShape: 'circle', // 点の形状 'square' 'triangle' 'star' 'diamond' 'polygon'
pointSize: 10, // 点の大きさ（全系列指定。系列別指定はできない）
colors: ['red', 'blue'], // 点の色（系列別指定可）
chartArea:{ backgroundColor: {stroke:'black', strokeWidth: 1} }, // チャートに枠を付けた
title: 'scatter11 散布図 arrayToDataTable',
titleTextStyle: { color: "blue", fontSize: 16}, // タイトルのフォント
hAxis: {title: '添加量', titleTextStyle: {fontSize: 14}, // Ｘ軸ラベル
minValue: 0, maxValue: 10, ticks: [0, 2, 4, 6, 8, 10], // 軸目盛り
gridlines:{color: 'gray', lineWidth: 1} // 補助線
},
vAxis: {title: '特性値', titleTextStyle: {fontSize: 14}, // Ｙ軸ラベル
minValue: 0, maxValue: 7, ticks: [0, 1, 2, 3, 4, 5, 6, 7], // 軸目盛り
gridlines:{color: 'gray', lineWidth: 1} // 補助線
},
}
var chart = new google.visualization.ScatterChart(document.getElementById('チャート表示場所'));
散布図とほとんど同じで、pointShape や pointSize など点を付加することもできます。
var options = {width: 500, height:300, // チャート表示場所のサイズ（Bodyでの指定もできる）
lineWidth: 4, // 折線の太さ（全系列に適用）
colors: ['red', 'blue'], // 点の色（系列別指定可）
chartArea:{ backgroundColor: {stroke:'black', strokeWidth: 1} }, // チャートに枠を付けた
title: 'line11 折線グラフ arrayToDataTable',
titleTextStyle: { color: "blue", fontSize: 16}, // タイトルのフォント
hAxis: {title: '添加量', titleTextStyle: {fontSize: 14}, // Ｘ軸ラベル
minValue: 0, maxValue: 10, ticks: [0, 2, 4, 6, 8, 10], // 軸目盛り
gridlines:{color: 'gray', lineWidth: 1} // 補助線
},
vAxis: {title: '特性値', titleTextStyle: {fontSize: 14}, // Ｙ軸ラベル
minValue: 0, maxValue: 7, ticks: [0, 1, 2, 3, 4, 5, 6, 7], // 軸目盛り
gridlines:{color: 'gray', lineWidth: 1} // 補助線
},
}
var chart = new google.visualization.LineChart(document.getElementById('チャート表示場所'));
line11 の options に次を加えるだけです。
curveType: 'function', // ★★ 曲線化
どのように曲線にしたのかはわかりません。
国別比較や時系列変化などＸ軸が質的データ（' ' で囲まれたデータ）のときは、Ｘ軸が等間隔になります。
line11 とほぼ同じですが、hAxis の目盛りが不要になります。
var data = google.visualization.arrayToDataTable([
['製品', '特性１', '特性２'],
['A', 4, 5],
['B', 2, 6],
['C', 6, 4],
['D', 4, 5],
['E', 5, 3],
['F', 4, 5]
]);
var options = {
…
hAxis: {title: '製品', titleTextStyle: {fontSize: 14}}, // Ｘ軸ラベル
…
}
グラフとＸ軸の間を塗りつぶすだけで、折線グラフとほぼ同じです。
複数系列のとき、色が重なるので、透明度の指定など面倒なので、デフォルトのままにするのが適切です。
折線グラフで積上げグラフにするより、これを用いるのが適切です。
積上げ棒グラフと同様に、次を加えるだけです。
isStacked: true, // ★★ 積上げグラフにする
isStacked: 'percent', // 百分率になる
series: {
0:{targetAxisIndex: 0, // 系列０のグラフ指定
color: 'blue', lineWidth: 4,
},
1:{targetAxisIndex: 1, // 系列１のグラフ指定
color: 'red',lineWidth: 2,
}
},
vAxes: { // Ｙ軸
0: { // 系列０（左側）
title: '数量',
titleTextStyle: { color: "blue", fontSize: 14},
},
1: {
title: '金額',
titleTextStyle: { color: "red", fontSize: 14},
}
},
var chart = new google.visualization.ComboChart(document.getElementById('チャート表示場所'));
dual11に次の変更をします。 seriesType: 'bars', // ★★グラフ全体を棒グラフと一時指定 series: { … 1:{targetAxisIndex: 1, // 系列１のグラフ指定 type: 'line', // ★★折線グラフに変更 …
入力データ
var data = google.visualization.arrayToDataTable([
['x', 'y'],
['A', 4,],
['B', 2,],
['C', 6,],
['D', 4,],
['E', 5,],
['F', 4,]
]);
オプション設定（デフォルトにした）
var options = {width: 500, height:400,
chartArea:{ backgroundColor: {stroke:'black', strokeWidth: 1} }, // チャートに枠を付けた
title: 'pie11円グラフ（デフォルト）',
titleTextStyle: { color: "blue", fontSize: 16}, // タイトルのフォント
}
チャートの作成・表示
var chart = new google.visualization.PieChart(document.getElementById('チャート表示場所'));
円グラフ特有の oputions のパラメータ
pieHole: 0.4, // ドーナッツになる。穴の割合
pieSliceText: 'percentage', // スライス（切片）の表示内容 'percentage', 'value', 'label', 'none'
pieSliceTextStyle: { // 表示文字のスタイル
color: 'black',
fontSize: 14
},
colors: ['red', 'blue', … ], // 切片の色。表示文字との関係があり指定しないほうがよい。