×

ソースコードほぼコピペでOK!Google Chart Tools(API)とJavaScriptを使用した円グラフの作り方

2016年4月24日 コーディング

円グラフ

googleが提供している「Google Chart Tools」というapiを知っていますか?

「Google Chart Tools」とJavaScriptをコーディングするだけで様々なグラフ(棒グラフ、円グラフ、折れ線グラフ、ヒストグラムなど)を簡単に実現可能です。

今回は「Google Chart Tools」で円グラフを作成する手順を紹介します。

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

まずは作成する円グラフがどんなものか確認しましょう。

下記円グラフのサンプルを用意しました。

サイドバー下にあるMIGOブログのカテゴリごとの記事数を円グラフにしてみました。
※2016年4月現在

円グラフだと、データが可視化されて分かりやすいですね。

「Google Chart Tools」のサイトからコードをコピペして項目を変更しよう

「Google Chart Tools」で円グラフを作成するのはとても簡単です。

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

まずは、下記URLをクリックしてください。

https://developers.google.com/chart/interactive/docs/gallery/piechart#overview

googleディベロッパーツール

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

下記、googleが提供する円グラフ描画用コードの項目を変更したものです。


  
    
    
  
  
    

項目を変更する

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

●円グラフに表示するデータ(data)
デフォルトでは[‘Task’, ‘Hours per Day’]と記述されています。これを[‘カテゴリ’, ‘記事数’]に変更します。特にこの部分は変更する必要はありませんが、何を表しているか分かりやすくするために変更はしておいたほうがいいと思います。

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

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

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

項目を変更・確認してからコピペすることもできる

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

円グラフエディット画面

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

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

グラフの色も指定可能

デフォルトでグラフの色が用意されていますが、「デフォルトの色が好きじゃない」、「サイトのカラーと合わせたい」という場合に、こちら側で好みの色を指定することが可能です。

緑系の色のGoogleChart

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

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

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

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

まとめ

どうですか?とても手軽に円グラフを作成することができました。

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

もし、ウェブページでグラフを使ってデータを可視化したいけどあまり時間と労力をかけたくないという方はぜひ「Google Chart Tools」を利用してみてください。

関連記事