Webサイトにグラフを設置することができる”Google Charts”の使い方【基本編】
今回は、Webサイトに色々な種類のグラフを設置することができるGoogle Chartsについて紹介していきたいと思います。Google ChartsはGoogleが提供するグラフ描画のJavaScriptライブラリです。
Google Chartsは多機能で、できることがとても多いので、今回は基本編としてグラフを設置する際の手順と、よく使われるであろう種類のグラフの設置方法などについて紹介していきたいと思います。
・Google Chartsのページ
https://developers.google.com/chart
・Google Chartsを利用して作成したグラフの例
Google Chartsを利用することで下のようなグラフをWebサイトに設置することができます。グラフ内にマウスポインタを持っていくとデータが表示されるなど単にグラフの画像を貼り付けただけのものよりもインタラクティブな表現が可能になります。
（投稿の最後にこのグラフの記述例がありますので、興味のある方は見てみてください。）
それでは、具体的な内容に入っていきたいと思います。
今回紹介していく内容は、以下のようになります。
Google Chartsを利用してグラフを設置する手順
Google Chartsを利用してグラフを設置する際の大まかな手順は以下のようになります。
- ライブラリを読み込ませる記述を設置する
- グラフを描画させる記述を設置する
それぞれの手順について、以下で紹介していきます。
Google Chartsのライブラリを読み込ませる
まずは、グラフを設置したいページにGoogle ChartsのライブラリをCDN経由で読み込ませます。
記述例は下のようになります。
<script src="https://www.gstatic.com/charts/loader.js"></script>グラフを描画させる記述を設置する
次にグラフを描画させる記述をページに設置します。
この記述の中でグラフにしたいデータを設置したり、オプションを記述することでグラフに様々なアレンジを加えることができます。
はじめに簡単な記述例を紹介して、その後で内容について紹介していきたいと思います。
<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// ①グラフにしたいデータを設置
var data = google.visualization.arrayToDataTable([
['輸入相手国', '輸入総額（億円）'],
['中国', 175077],
['米国', 74536],
['オーストラリア', 38313],
['台湾', 28629],
['韓国', 28416],
['タイ', 25401],
['ベトナム', 23551],
['ドイツ', 22763],
['サウジアラビア', 19696],
['アラブ首長国連邦', 17502]
]);
// ②グラフのオプションを指定
var options = {
title: '2020年輸入相手国トップ１０',
width: 400,
height: 300
};
// ③グラフの種類とグラフを設置する場所を指定
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>上記のグラフを描画させる記述は大きく分けて三つの部分に分けられます。
①グラフにしたいデータを設置
②グラフのオプションを指定
③グラフの種類とグラフを設置する場所を指定
以下でそれぞれの部分の記述例を抜き出して紹介していきます。
①グラフにしたいデータを設置
// ①グラフにしたいデータを設置
var data = google.visualization.arrayToDataTable([
['輸入相手国', '輸入総額（億円）'],
['中国', 175077],
['米国', 74536],
['オーストラリア', 38313],
['台湾', 28629],
['韓国', 28416],
['タイ', 25401],
['ベトナム', 23551],
['ドイツ', 22763],
['サウジアラビア', 19696],
['アラブ首長国連邦', 17502]
]);ここには、グラフにしたいデータを用意して記述します。
データの記述方法はいくつかの種類が利用できますが、今回の記述例では一番分かりやすそうな「arrayToDataTable()」を利用しています。
「arrayToDataTable()」を利用してデータを記述する場合は、記述例のように一番目のデータの[ ]内にデータのラベルとなる名称を記述し、二番目以降の各[ ]内に項目とデータを記述していきます。
データの記述方法についてもっと詳しく知りたい方は、下記の参考ページを見てみてください。
参考：DataTables and DataViews | Charts | Google Developers-Creating and Populating a DataTable
また、Google Chartsではグラフ化するデータとしてGoogle Spreadsheetsを利用することができます。
Google Spreadsheetsのデータを利用したグラフを設置する方法については、下記の記事で紹介していますのでよかったら見てみてください。
Google Chartsを利用してWebサイト上でGoogleスプレッドシートのデータからグラフを作成する方法
Googleスプレッドシート（Google Spreadsheets）内にあるデータをGoogle Chartsを利用してWebページ上でグラフ化する方法について、具体的な記述例も交えながら紹介していきます。
②グラフのオプションを指定
// ②グラフのオプションを指定
var options = {
title: '2020年輸入相手国トップ１０', // グラフのタイトルを指定
width: 400, // 幅を400pxに指定
height: 300 // 高さを300pxに指定
};ここには、設置するグラフのオプションについて記述してあります。
各種類のグラフで共通して利用できるオプションの主なものとしては、グラフのタイトルやグラフのサイズなどがあります。
ここでは、グラフのタイトルとグラフのサイズについて紹介しておきます。
グラフのタイトル
「title:」の中に指定した文字列をグラフのタイトルとしてグラフの上側に表示させることができます。
上記の記述例では、タイトルを「2020年輸入相手国トップ１０」と設定しています。
グラフにタイトルが不要な場合はこの「title」の記述は不要です。
タイトルに関してはこの他に文字の色やサイズなどを指定することもできます。
グラフのタイトルの文字色とフォントサイズを変更する場合の記述例
var options = {
title: '2020年輸入相手国トップ１０', // タイトルの文字列を指定
titleTextStyle: {
color: '#f00', // タイトルの文字色を指定
fontSize: 24 // タイトルのフォントサイズを指定
},
};タイトルの文字色は「’#4D189D’」のようなカラーコードの他、「’red’」など色の名前も利用することができます。
タイトルのフォントサイズはpxで数値を指定することができます。
グラフのサイズ
グラフのサイズとして、width（幅）とheight（高さ）をpxで指定することができます。
記述例では、widthを「400(px)」、heightを「300(px)」と指定しています。
var options = {
width: 400, // 幅を400pxに指定
height: 300 // 高さを300pxに指定
};これらの他にも利用できるオプションはたくさんありますが、設置するグラフの種類によって利用できるオプションも変わってくる場合が多いため、主なオプションは後半で紹介していきたいと思います。
③グラフの種類とグラフを設置する場所を指定
// ③グラフの種類とグラフを設置する場所を指定
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);ここには、設置するグラフの種類と、グラフを設置する場所について記述してあります。
今回の記述例では、グラフの種類として「PieChart（円グラフ）」を指定し、設置場所としてidが「chart_div」の場所を指定してあります。
具体的なグラフの設置例
Google Chartsで設置できるグラフの種類はとても多いので、今回は使われることの多そうな折れ線グラフ、棒グラフ、円グラフに絞ってそれぞれの設置方法やグラフで利用できるオプションについて紹介していきたいと思います。
なお、一つのグラフのところでしか紹介していないものでも、各グラフで共通して利用できるオプション項目も多数ありますので一通りチェックしていただけたらと思います。
また、Google Chartsでは、今回紹介するグラフ以外にもたくさんの種類のグラフを設置することができます。利用できるグラフの種類について詳しくは下記の参考ページを見てみてください。
参考：Chart Gallery | Charts | Google Developers
折れ線グラフ
基本的な折れ線グラフの設置方法とカスタマイズ例について紹介していきます。
基本的な折れ線グラフの設置方法
折れ線グラフを設置するには、グラフの種類を指定する記述のところで「LineChart」と指定します。
・折れ線グラフを設置する際の記述例
var chart = new google.visualization.LineChart(document.getElementById('myLineChart'));・デフォルト状態の折れ線グラフ
See the Pen
Untitled by saku (@web-saku)
on CodePen.
折れ線グラフのカスタマイズ例①
See the Pen
Untitled by saku (@web-saku)
on CodePen.
カスタマイズ例①では、デフォルト状態で紹介したグラフのデータをそのまま利用して、主にグラフの見た目について調整を加えています。
それぞれの調整箇所について記述例を交えながら紹介していきます。
なお、オプションの記述は「var options =」の中にまとめて記述することができます。
グラフタイトル
タイトルについては、文字のサイズや色などを変更しています。
var options = {
title: '時間帯ごとの来店人数', // タイトルを設定
titleTextStyle: {
color: '#444', // タイトルの文字の色を設定
fontSize: 18 // タイトルの文字のサイズを設定
}
};背景色とボーダー
背景の色とボーダーについて変更しています。
var options = {
backgroundColor: {
fill: '#eee', // グラフエリアの背景色を設定
stroke: '#aaa', // ボーダーの色を設定
strokeWidth: 3 // ボーダーの幅を設定
},
chartArea: {
backgroundColor: '#fff' // グラフ内の背景色を設定
}
};凡例
凡例（legend）については、設置場所と配置を変更しています。
凡例については設置場所（position）を’bottom’,’left’,’in’,’right’,’top’の中から選択するか、表示させない場合には’none’を指定することで非表示にできます。配置（alignment）は’start’,’center’,’end’の中から選択することができます。
var options = {
legend: {
position: 'in', // 凡例の設置場所を'in'に設定
alignment: 'start', // 凡例の配置を'start'に設定
}
};折れ線グラフの線
折れ線グラフの線を点線にして、色を変更しています。
var options = {
lineDashStyle: [4, 4], // グラフの線を4pxの実線と4pxの空白が交互にくるように指定
lineWidth: 4, // グラフの線の太さを4pxに指定
colors: ['#448'] // グラフの線の色を指定
};ポイントを表示
グラフデータのポイントはデフォルトでは表示されませんので、表示させるようにしています。
ポイントに関しては、形状やサイズを設定することができます。
ポイントの形状（pointShape）は、’circle’, ‘triangle’, ‘square’, ‘diamond’, ‘star’,’polygon’の中から選択することができます。
なお、ポイントの色は基本的に前述したグラフの線の色と揃うようになっていますが、最後に紹介している項目のように変更することもできます。
var options = {
pointSize: 15, // ポイントのサイズを設定
pointShape: 'star', // ポイントの形状を'star'に設定
};ツールチップ
グラフ内のポイントにマウスホバーしたときに表示されるツールチップの文字色と文字サイズを変更しています。
var options = {
tooltip: {
textStyle: {
color: '#f0f', // ツールチップの文字の色を設定
fontSize: 12 // ツールチップの文字のサイズを設定
}
}
};文字のサイズ
グラフ内の文字のサイズを変更しています。
var options = {
fontSize: 14
};グラフの縦軸
グラフの縦軸（vAxis）に関してはタイトルの設置と最大値の設定を変更しています。
var options = {
vAxis: {
title: '来店人数', // 縦軸のタイトルを設定
maxValue: 100 // 縦軸の最大値を100に設定
}
};グラフの横軸
グラフの横軸（hAxis）に関してはタイトルを設置しています。
var options = {
hAxis: {
title: '時間帯' // 横軸のタイトルを設定
}
};ポイントの装飾
ここまで紹介してきたカスタマイズの内容はオプションの部分へ記述をしていますが、この項目のカスタマイズはデータのところへ記述を行います。
var data = new google.visualization.arrayToDataTable([
['時間帯', '来店人数', {'type': 'string', 'role': 'style'}],
['10~12時', 30, 'point { size: 8; shape-type: triangle; fill-color: #A31C5D;}'],
['12~14時', 60, 'point { size: 8; shape-type: triangle; fill-color: #A31C5D;}'],
['14~16時', 80, 'point { size: 18; shape-type: star; fill-color: #ff0; stroke-color: #000; stroke-width: 3; }'],
['16~18時', 50, 'point { size: 8; shape-type: triangle; fill-color: #A31C5D;}']
]);上記のようにデータの記述部分でそれぞれのポイントについて個別に変更を加えることができます。紹介したカスタマイズ例では三番目のポイントだけを強調するために他のポイントとは異なる装飾を加えています。
折れ線グラフのカスタマイズ例②
See the Pen
Untitled by saku (@web-saku)
on CodePen.
カスタマイズ例②では、グラフ内に複数の折れ線を配置しています。
それぞれの変更箇所について記述例を交えながら紹介していきます。
データ
複数の折れ線を設置するためにデータを下記のように記述しています。
var data = new google.visualization.arrayToDataTable([
['月', '太郎', '次郎', '三郎'],
['3月', 81, 63, 49],
['4月', 80, 66, 51],
['5月', 80, 69, 52],
['6月', 78, 66, 54],
['7月', 77, 65, 55],
['8月', 73, 64, 55]
]);凡例
凡例をグラフ内の中央に配置しています。
var options = {
legend: {
position: 'in',
alignment: 'center'
}
};グラフの縦軸
グラフの縦軸（vAxis）に関してはタイトルを設置しています。
var options = {
vAxis: {
title: '体重 (kg)'
}
};折れ線グラフの線
折れ線の太さを変更しています。
var options = {
lineWidth: 3, // グラフの線の太さを3pxに指定
};各折れ線の色
各折れ線の色を設定しています。
var options = {
colors: ['#1A3566', '#307060', '#BC9335']
};折れ線グラフのカスタマイズ例③
See the Pen
Untitled by saku (@web-saku)
on CodePen.
カスタマイズ例③では、異なる単位のデータを一つのグラフ内に表示するために縦軸を左右に配置しています。
それぞれの変更箇所について記述例を交えながら紹介していきます。
データ
各データを下記のように記述しています。
var data = new google.visualization.arrayToDataTable([
['月', '平均気温', '降水量'],
['1月', 7.0, 45.5],
['2月', 10.2, 79.5],
['3月', 13.5, 116.5],
['4月', 16.7, 66.0],
['5月', 20.4, 133.5],
['6月', 24.2, 123.0],
['7月', 28.9, 45.5],
['8月', 27.5, 881.5],
['9月', 25.9, 246.5],
['10月', 21.0, 44.0],
['11月', 13.9, 152.5],
['12月', 9.1, 45.0]
]);グラフの縦軸を左右に設置
縦軸を左右に設置するためにオプションの項目内に下記のように記述しています。
var options = {
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1}
}
};グラフの縦軸のタイトルなど
左右の縦軸のタイトルと最大値を設置するために下記のように記述しています。
「vAxes」内の「0」と「1」の数値は上記の「series」の数値と対応しています。
var options = {
vAxes: {
0: {title: '平均気温 (℃)', maxValue: 40},
1: {title: '降水量 (mm)'}
}
};各折れ線の色
各折れ線の色を下記のように設定しています。
var options = {
colors: ['#F4BD00', '#138AD9']
};Google Chartsの折れ線グラフについての詳細情報
Google Chartsの折れ線グラフについてもっと詳しくは下記のページを見てみてください。
・参考：Line Chart | Charts | Google Developers
棒グラフ
基本的な棒グラフの設置方法とカスタマイズ例について紹介していきます。
基本的な棒グラフの設置方法
棒グラフを設置するには、グラフの種類を指定する記述のところで「ColumnChart」と指定します。
・棒グラフを設置する際の記述例
var chart = new google.visualization.ColumnChart(document.getElementById('myLineChart'));・デフォルト状態の棒グラフ
See the Pen
Untitled by saku (@web-saku)
on CodePen.
棒グラフのカスタマイズ例①
See the Pen
Untitled by saku (@web-saku)
on CodePen.
カスタマイズ例①では、デフォルト状態で紹介したグラフのデータをそのまま利用して、主にグラフの見た目について調整を加えています。
それぞれの調整箇所について記述例を交えながら紹介していきます。
タイトル
タイトルの文字列を変更しています。
var options = {
title: '科目別の平均点数' // タイトルを設定
};グラフ内のテキストのフォント
グラフ内で使用するテキストのフォントを変更しています。
var options = {
fontName: 'Serif' // フォントを'Serif'に設定
};背景色とボーダー
グラフエリアの背景の色とボーダーについて変更しています。
var options = {
backgroundColor: {
fill: '#eee', // 背景色を設定
stroke: '#aaa', // ボーダーの色を設定
strokeWidth: 3 // ボーダーの幅を設定
}
};凡例
凡例（legend）については、表示しないように設定しています。
var options = {
legend: 'none' // 凡例を表示させない
};棒グラフの幅
グラフの棒の幅を変更しています。
棒の幅はpxでの数値か各要素幅に対する比率（%）で指定することができます。
var options = {
bar: {
groupWidth: '40%' // グラフの棒の幅を40%に設定
}
};グラフの縦軸
グラフの縦軸（vAxis）に関しては最小値、最大値の設定を変更しています。
var options = {
vAxis: {
maxValue: 100,
minValue: 0
}
};棒グラフの色
グラフの棒の色を項目毎に変更しています。
グラフの棒の色を一律ではなく、項目毎に変えたい場合データの項目内にそれぞれに設定したい色情報を記述します。
var data = new google.visualization.arrayToDataTable([
['科目', '平均点数', { role: 'style' }],
['国語', 76, '#F6EDB3'],
['算数', 89, '#B0E3EA'],
['理科', 83, '#CBB9FE'],
['社会', 78, '#ACECAE']
]);
]);棒グラフのカスタマイズ例②
See the Pen
Untitled by saku (@web-saku)
on CodePen.
カスタマイズ例②では、グラフ内に複数の棒を設置しています。
それぞれの変更箇所について記述例を交えながら紹介していきます。
データ
複数の棒グラフを表示させるためにデータを下記のように記述しています。
var data = new google.visualization.arrayToDataTable([
['科目', '1年生', '2年生', '3年生', '4年生'],
['国語', 76, 81, 78, 88],
['算数', 89, 82, 80, 79],
['理科', 83, 78, 80, 81],
['社会', 78, 83, 85, 88]
]);凡例
凡例（legend）については、グラフの下側に表示させるように設定しています。
var options = {
legend: 'bottom' // 凡例の位置を'bottom'に指定
};棒グラフの棒の色
グラフの各棒の色を変更しています。
var options = {
colors:['#FF9E56', '#5E349A', '#138AD9', '#F4BD00']
};棒グラフのカスタマイズ例③
See the Pen
Untitled by saku (@web-saku)
on CodePen.
カスタマイズ例③ではデフォルト状態で紹介したグラフのデータをそのまま使用し、棒グラフの向きを横向きに変更し、データの値を表示させています。
それぞれの変更箇所について記述例を交えながら紹介していきます。
棒グラフを横向きにする
棒グラフの向きを横向きにするためにグラフの種類を「BarChart」へ変更しています。
var chart = new google.visualization.BarChart(document.getElementById('myColumnChart'));データの値をグラフ内に表示させる
棒グラフに各データの数値を表示させるために以下の二点を変更しています。
①「var view =」の記述を追加
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1, // 表示させるデータを指定
type: "string",
role: "annotation" }
]);②「chart.draw()」の第一引数を「view」に変更
var chart = new google.visualization.BarChart(document.getElementById('myColumnChart'));
chart.draw(view, options); // chart.draw()の一番目の引数を'view'に変更
グラフの横軸
グラフの横軸の最大値と最小値を設定しています。
var options = {
hAxis: {
maxValue: 100,
minValue: 0
}
};Google Chartsの棒グラフについての詳細情報
Google Chartsの棒グラフについてもっと詳しくは下記のページを見てみてください。
・参考：Column Chart | Charts | Google Developers
円グラフ
基本的な円グラフの設置方法とカスタマイズ例について紹介していきます。
基本的な円グラフの設置方法
円グラフを設置するには、グラフの種類を指定する記述のところで「PieChart」と指定します。
・円グラフを設置する際の記述例
var chart = new google.visualization.PieChart(document.getElementById('myLineChart'));・デフォルト状態の円グラフ
See the Pen
Untitled by saku (@web-saku)
on CodePen.
円グラフのカスタマイズ例①
See the Pen
Untitled by saku (@web-saku)
on CodePen.
カスタマイズ例①では、デフォルト状態で紹介したグラフのデータをそのまま利用して、主にグラフの見た目について調整を加えています。
それぞれの調整箇所について記述例を交えながら紹介していきます。
タイトル
タイトルについては、文字のサイズや色などを変更しています。
var options = {
title: '好きなスポーツアンケート',
titleTextStyle: {
color: '#444',
fontSize: 18
}
};背景色とボーダー
グラフエリアの背景の色とボーダーについて変更しています。
var options = {
backgroundColor: {
fill: '#EBE0C9',
stroke: '#956E5E',
strokeWidth: 5
}
};各スライスの表示内容
円グラフの各スライスの表示内容を変更しています。
表示内容はデフォルトでは’percentage’が設定されています。この他に’value’,’label’か、何も表示しない’none’を選択することができます。
ただし、上のグラフの例のようにスペースが十分にない場合、なにも表示されなくなりますので注意が必要です。
var options = {
pieSliceText: 'label' // スライスの表示内容を'label'に設定
};各スライスの文字
円グラフの各スライスの文字色とフォントサイズを変更しています。
var options = {
pieSliceTextStyle: {
color: '#333', // スライスの文字色を設定
fontSize: 10 // スライスの文字サイズを設定
}
};各スライスの境界線
円グラフの各スライスの境界線色を変更しています。
var options = {
pieSliceBorderColor: '#000'
};各スライスの色
円グラフの各スライスの色を変更しています。
var options = {
colors:['#00BFB2','#FFEB74','#F79563','#F25D5A','#006AD1','#79C362']
};特定のスライスを強調
指定したスライスを少し外側に出して強調しています。
オフセット量を指定する「offset:」には0から1の間の数値を指定することができます。
var options = {
slices: {
1: {offset: 0.2} // スライス1を0.2だけオフセットさせる
}
};円グラフのカスタマイズ例②
See the Pen
Untitled by saku (@web-saku)
on CodePen.
カスタマイズ例②では、複数の円グラフを設置しています。
それぞれの変更箇所について記述例を交えながら紹介していきます。
複数のグラフを設置する
一つのページに二つのグラフを設置する際の記述の大枠は下記のようになります。
（それぞれのグラフの名称を「MenChart」「WomenChart」としています。）
<script>
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawMenChart); // MenChartのコールバック
google.charts.setOnLoadCallback(drawWomenChart); // WomenChartのコールバック
// MenChartを定義
function drawMenChart() {
var data = new google.visualization.arrayToDataTable([
// MenChartのデータを記述
]);
var options = {
// MenChartのオプションを記述
};
// MenChartを描画させる
var chart = new google.visualization.PieChart(document.getElementById('menPieChart'));
chart.draw(data, options);
}
// WomenChartを定義
function drawWomenChart() {
var data = new google.visualization.arrayToDataTable([
// WomenChartのデータを記述
]);
var options = {
// WomenChartのオプションを記述
};
// WomenChartを描画させる
var chart = new google.visualization.PieChart(document.getElementById('womenPieChart'));
chart.draw(data, options);
}
</script>円グラフのカスタマイズ例③
See the Pen
Untitled by saku (@web-saku)
on CodePen.
カスタマイズ例③では、円グラフの中央に穴を開けています。
それぞれの変更箇所について記述例を交えながら紹介していきます。
円グラフの中央に穴をあける
円グラフの中央に穴をあける設定をしています。
「pieHole」に設定する数値で穴の大きさを設定することができ、0から1の間の数値を指定することができます。
var options = {
pieHole: 0.5 // 中央の穴の大きさを0.5に設定
};Google Chartsの円グラフについての詳細情報
Google Chartsの円グラフについてもっと詳しくは下記のページを見てみてください。
・参考：Pie Chart | Charts | Google Developers
まとめ
以上、Google Chartsの基本的な使い方について紹介してきました。
参考になりましたら幸いです。
・サンプルグラフのコード
グラフに戻る
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.arrayToDataTable([
['年', '入場者数', '平均顧客単価'],
['2017', 659248, 34713],
['2018', 855902, 42748],
['2019', 799667, 37468],
['2020', 689212, 38695],
['2021', 748347, 45386]
]);
var options = {
title: '施設の年間入場者数と平均顧客単価の推移',
titleTextStyle: {
fontSize: 18
},
width: 600,
height: 400,
backgroundColor: {
fill: '#DCEFFC',
stroke: '#7C7669',
strokeWidth: 5
},
chartArea: {
backgroundColor: '#fff'
},
seriesType: 'bars',
colors:['#EE6464', '#027FD8'],
bar: {
groupWidth: '50%'
},
lineWidth: 4,
pointShape: 'circle',
pointSize: 6,
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1, type: 'line'}
},
vAxes: {
0: {title: '入場者数', minValue: 0, gridlines:{count: 5}, minorGridlines:{count: 0}},
1: {title: '顧客単価', minValue: 0, maxValue: 60000, gridlines:{count: 3}, minorGridlines:{count: 0}}
},
};
var chart = new google.visualization.ComboChart(document.getElementById('myComboChart'));
chart.draw(data, options);
}
</script>関連記事
Google Chartsを利用してWebサイト上でGoogleスプレッドシートのデータからグラフを作成する方法
Googleスプレッドシート（Google Spreadsheets）内にあるデータをGoogle Chartsを利用してWebページ上でグラフ化する方法について、具体的な記述例も交えながら紹介していきます。
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
コメントを残す