【Javascript】ホームページ上でグラフ作成するツール(Google Chart Tools）

ホームページ上で、グラフを作成するツールに、
 Google Chart Tools
があります。

下が、私が実際に作成したグラフです。
・円グラフ(Pie Chart)

・StepLineグラフ

・棒(Bar)グラフ

このツールは、プログラミング言語(JavaScript )にて、チャート作成用APIを使って、 SVG を使ったグラフを表示するツールです。
JavaScriptだと普通ソースコードがみれるのですが、このチャートツールは、JavaScript のソースをダウンロードして使用することができません。
 ※ 必ず Google のサイトにアクセスし行かなければなりません。

 ただし、Google Chart Tools は商用利用も OK でそうです。
実際に使ってみたので、使い方や、参考にしたサイトを紹介します。

１、HTMLでの記述
(1) HTMLに「Google Chart の JavaScirpt ファイルのロード指定」する
 <script type="text/javascript" src="https://www.google.com/jsapi"></script> 

(2) グラフ作成のスクリプトの記述
Load時に、drawChart関数を実行して、グラフを作成します。
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); 
 function drawChart() {  
    // グラフ作成 // : 
  } 
</script>
 
(3) グラフを描画する div 要素
グラフを描画するところには ID 名をつけた div 要素を置きます。
<div id="chart_div" style="width: 80%; height: 400px;"></div>


２、グラフ作成の関数
グラフ作成用の関数内ではさらに 3 つのことを行います。
・データの作成
・オプションの設定
・グラフの描画

【drawChart 関数内:】
(1) データテーブルの作成 
var data = google.visualization.arrayToDataTable([ ['年度', '売上', '費用'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]);

(2) グラフのオプションを設定 
 グラフのオプションはオブジェクト(連想配列)で指定します。
指定可能な要素は title のようなグラフで共通のものや 円グラフの is3D といった特定のグラフで固有のものがあります。

var options = { title: '会社業績' };

【StepLineチャートの設定例】
            var lcolor1 = _AppliedColorSettings.getValue("PersonalizedTradeLine1");  // 線１の色
            var lcolor2 = _AppliedColorSettings.getValue("PersonalizedTradeLine2"); // 線２の色
            var colors: string[] = [lcolor1, lcolor2];　// 色の配列化
            var bcolor = _AppliedColorSettings.getValue("GraphBackGround");//背景色
            var gfcolor = _AppliedColorSettings.getValue("GraphFont");//フォント色
            var gaxis = _AppliedColorSettings.getValue("Axis");//軸色
            var dash = _AppliedColorSettings.getValue("DashLine");//破線色
            var legend = _AppliedColorSettings.getValue("LegendBackGround");//凡例色

            var options = {
                'backgroundColor': bcolor,
                'titleTextStyle': {
                    color: gaxis
                },
                'colors': lcolors, 
                'hAxis': {//横軸
                    'textStyle': {
                        fontSize: 10,
                       color: gfcolor
                   },
                    'gridlines' : {  // 補助線
                       color: dash
                   },
                    'baselineColor' : gaxis// 補助線の背景色
                },
                'vAxis': {
                    'textStyle': { fontSize: 10, color: gfcolor },
                },
                'pointSize': 8,
                'legend': { // 凡例
                    position: isLegend,
                    color: legend,
                    textStyle: {
                        color: gfcolor
                    },
                },
                'crosshair': { trigger: 'both' }  // •プロットにマウスオーバーすると十字に線を表示
            };【Barチャートの設定例】
            var bcolor = _AppliedColorSettings.getValue("GraphBackGround");
            var gfcolor = _AppliedColorSettings.getValue("GraphFont");
            var gaxis = _AppliedColorSettings.getValue("Axis");
            var dash = _AppliedColorSettings.getValue("DashLine");
            var legend = _AppliedColorSettings.getValue("LegendBackGround");
            var barcolor = _AppliedColorSettings.getValue("BarGraph");
            var options = {
                'colors': [barcolor],
                'backgroundColor': bcolor,
                'title': title,
                'width': 300,
                'height': 200,
                'titleTextStyle': { color: gfcolor },
                'hAxis': {
                    'textStyle': { fontSize: 10, color: gfcolor },
                    'gridlines': { count: 4, color: dash },
                    'minorGridlines': { count: 2, color: 'gray' },
                    'stroke': { color: gfcolor }
                },
                'vAxis': {
                    'textStyle': { fontSize: 10, color: gfcolor },
                },
                'legend': {
                    position: 'none',
                    color: legend,
                    textStyle: {
                        color: gfcolor
                    },
                }             };
【Pieチャートの設定例 】
            var bcolor = _AppliedColorSettings.getValue("GraphBackGround");
            var gfcolor = _AppliedColorSettings.getValue("GraphFont");
            var legend = _AppliedColorSettings.getValue("LegendBackGround");

            var bcolor = _AppliedColorSettings.getValue("GraphBackGround");

            var options = {
                backgroundColor: bcolor,
                'title': title,
                'titleTextStyle': { color: gfcolor },
                'width': 350,
                'height': 300,
                'legend': {
                    slingment: 'end',
                    color: legend,
                    textStyle: {
                        color: gfcolor
                    },
                }
            };

(3) LineChart のオブジェクトの作成 
 グラフの描画ではまず対象グラフのオブジェクトを作成します。
この際、描画先の div 要素を ID 名から取得して渡します。

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

(4) データテーブルとオプションを渡して、グラフを描画 
chart.draw(data, options);

【参考URL】
http://dotinstall.com/lessons/basic_chart_tools/3301 ⇒動画で紹介しているので、便利
http://yohshiy.blog.fc2.com/blog-category-24.html

※上記二つをみれば十分ですが、その他にもっと勉強するために、以下サイトも読むとよいと思います

http://www.showa-corp.jp/special/graphtools/gct.html
http://yohshiy.blog.fc2.com/blog-entry-195.html
https://developers.google.com/chart/interactive/docs/gallery/motionchart?hl=ja 
https://developers.google.com/chart/interactive/faq#offline
http://yohshiy.blog.fc2.com/blog-entry-206.html

https://developers.google.com/chart/interactive/docs/gallery/columnchart#Configuration_Options
←アニメーションの設定方法