2020/06/10 (更新日: 2020/06/13)

【超簡単】Google Chartsによる円グラフの作り方【コピペでOK】

Programming Web

Web制作者
「Webサイトに円グラフを載せたい。円グラフの画像じゃなくて、JavaScriptで描画したものを作りたい。でも難しそうだなぁ…。」

こういった疑問にお答えします。

本記事の内容

GoogleChartAPIで円グラフを作成する方法

こんにちは、mine（@mineblog7）です。

ブログ歴は4年、Web制作歴は7年ほどになります。
現在はmineblogを一人で運営しています。

Web制作の中で、サイトに円グラフを作成して掲載する機会がありました。
その時に、「GoogleCharts」を使って円グラフを作成したので、その方法を紹介します。

GoogleCharts

GoogleChartsはGoogleが提供しているAPIです。
GoogleChartsとJavaScriptをコーディングするだけで様々種類のグラフを簡単に作成することができます。

GoogleChartで用意されているグラフ

棒グラフ
円グラフ
折れ線グラフ
面グラフ
コンボチャート
ヒストグラム

上のような代表的なグラフに加えて、全部で30種類以上のグラフが用意されています。

基本的には、用意されているJavaScriptのコードをコピペするだけで簡単にグラフを実現できます。

円グラフのサンプルを確認

まずは作成する円グラフがどんなものか確認しましょう。
下記円グラフのサンプルを用意しました。

mineblogのカテゴリごとの記事数を円グラフにしてみました。
円グラフだと、データが可視化されてとても分かりやすいですね。

少しページの読み込み速度に影響がでてしまうことが難点といえます。

GoogleChartsでの円グラフ作成手順

GoogleChartsでの円グラフの作成手順を紹介します。

ソースコードをコピーする

まずは、下記URLをクリックしてGoogleChartsページを開きます。
Visualization: Pie Chart

Exampleの円グラフ下のコードをコピペして、表示する項目の変更だけでOKです。

サンプルのソースコード

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
	google.charts.load('current', {'packages':['corechart']});
	google.charts.setOnLoadCallback(drawChart);

 	function drawChart() {
		var data = google.visualization.arrayToDataTable([
			['Category', '記事数'],
			['Web', 24],
			['Blog', 11],
			['Business', 11],
			['Gourmet', 6],
			['Life', 6]
		]);

		var options = {
			title: 'ブログカテゴリ別記事数'
		};

		var chart = new google.visualization.PieChart(document.getElementById('piechart'));

		chart.draw(data, options);
	}
</script>

上記コードは、初めにサンプルで使用したGoogleChartsが提供する円グラフ描画用コードの項目を変更したものです。

次に具体的な変更点を説明します。

項目を変更する

具体的に変更した箇所は下記の点です。

円グラフに表示するデータ（data）

google.visualization.arrayToDataTableの1つ目の要素を変更しました。

デフォルト:['Task', 'Hours per Day']
変更後:['Category', '記事数']

本来、特にこの部分は変更する必要はありませんが、何を表しているか分かりやすくするために変更はしておいてもよいと思います。。

後は例にならってカテゴリ名と記事数のデータを並べるだけです。

円グラフのタイトル（options）

optionsのtitleにデフォルトでMy Daily Activitiesと記述されていますが、「ブログカテゴリ別記事数」に変更します。これが円グラフのタイトルになります。

その他

デフォルトでdocument.getElementById('piechart')という記述があります。このpiechartは円グラフを表示させるためのdiv要素のid名と対応しています。

項目を変更・確認後にコピペ可能

ちなみに、GoogleChartsで、Code it yourself on JSFiddleボタンをクリックすると、下記のようなedit画面が表示されます。

一つの画面で同時に円グラフのHTML、CSS、JavaScriptのコードを修正可能で、画面左上のRunボタンをクリックすると実際の円グラフも同時に確認できるのでかなり便利です。

思い通りの円グラフができたら各コードをコピペして使えばOKです。

グラフの色も指定可能

デフォルトでグラフの色が用意されていますが、「デフォルトの色が好きじゃない」、「サイトのカラーと合わせたい」という場合もありますよね。

そんなときは、自由に好みの色を指定することが可能です。

例えば、こんな風に緑系の色に統一させることができます。

色の設定オプション

var options = {
    title: 'ブログカテゴリ別記事数',
    colors: [
    '#009988',
    '#90ee90',
    '#008000',
    '#66cdaa',
    '#2e8b57',
    '#66cdaa'
  ]
};

グラフの色を変えるには、optionsのtitleに続けてcolorsを指定します。

google.visualization.arrayToDataTableで設定したデータの順番とcolorsの順番が対応しているので、それぞれカラーコードを指定します。これだけでOKです。

まとめ

GoogleChartsを使った円グラフの作成方法について再度まとめます。

ポイント

GoogleChartsで用意されているソースコードをhead内にコピペする
項目を変更する
オプションで配色も変更可

ほぼコピペするだけで、簡単に円グラフを作成することができました。
他のグラフも円グラフと同じようにコードをコピペして少し変更を加えれば簡単に作成できます。

Webサイトでグラフを使ってデータを可視化したいけどあまり時間と労力をかけたくないという方はぜひGoogleChartsを利用してみてください。

おすすめ記事【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事「知らないから落ちる面接の４点減点法」で面接に挑んだ結果

Programming