Google Chart Tools
があります。
下が、私が実際に作成したグラフです。
・円グラフ(Pie Chart)
・StepLineグラフ
このツールは、プログラミング言語(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
←アニメーションの設定方法
