最近はとても便利になったので、webシステム（html）に簡単にきれいなチャートが描けるチャートのライブラリ(js)がたくさんあります。その中でも私が特に気に入っているものを簡単ですが使い方の含めて紹介したいと思います。
チャートライブラリ
- google charts
- c3.js
google chartsの使い方
まずは、google chartsです。システム開発をしていてGoogleを知らない人はいないと思いますので、特に説明は不要かと思いますが、Googleが提供しているチャートライブラリになります。公式サイトは英語ですが、必要であれば翻訳機能等を使用しながら簡単に作成できると思います。
公式サイト：https://developers.google.com/chart
注意事項としては、google chartsは、オンライン（インターネットに接続されている環境）でなければ使用できません。(※2021年4月現在) もし、オフライン環境で使用したい場合は、別のチャートライブラリを選定する必要があります。
描きたいチャートを探す
チャートライブラリを探す時点で、どんなチャートを描きたいかある程度考えているかと思います。まずは、Chart Galleryで自分が作成したいチャートが存在しているか確認しましょう。
↓Chart Galleryは以下です。
https://developers.google.com/chart/interactive/docs/gallery
基本的なものは、揃っていると思います。描きたいチャートが決まったら、それをクリックします。
チャートを描いてみる
ここでは、Column Chart（棒グラフ）を例に見てみます。基本的に、公式サイトの例やサンプルコードが記載されているので、それを参考に自分が使いやすいようにカスタマイズするだけで、簡単にチャートを表示できます。
１．HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 800px; height: 500px;"></div>
１行目のhtmlでGoogle Chartのjsをロードしています。基本的に、チャートを表示したいhtmlのヘッダで読み込めば問題ありません。
２行目のhtmlは、チャートの表示場所です。idは、好きなidを指定可能です。また、styleでチャートの表示領域を指定します。指定しない場合は、ブラウザの横幅いっぱいにチャートが描画されます。
google Chartsの場合、一度生成されたchartはブラウザのサイズを変更してもサイズは変更されません。そのため、チャートの表示領域が予め決まっているシステムのチャート表示に向いていると思います。
もし、チャートのサイズを動的に変更したい場合は、ブラウザのサイズを変更した場合、チャートを再描画するような仕組みを作成する必要があります。再描画ボタンを設置し、そのボタンをクリックしてもらってもよいと思いますが。
２．js
jsです。htmlに直接<script></script>で記載してもよいです。汎用的に使用する場合は、もう少し整理してjsファイルに切り出すとよいですね。ここでは、サンプルなので簡単に記載しています。
google.charts.load('current', {'packages':['bar']}); // チャートの読み込み
google.charts.setOnLoadCallback(drawChart); // onload後にdrawChart関数を呼び出しています。
function drawChart() {
var data = google.visualization.arrayToDataTable([ // データを設定
['年', '訪問者', '購入者'],
['2017', 700, 300],
['2018', 1000, 400],
['2019', 1170, 460],
['2020', 660, 220],
['2021', 1030, 540]
]);
var options = { // オプションを設定
chart: {
title: 'Sample Chart',
subtitle: '2017～2021',
},
colors: ['#0000ff', '#ff00ff']
};
var chart = new google.charts.Bar(document.getElementById('chart_div')); // チャートの生成
chart.draw(data, google.charts.Bar.convertOptions(options)); // 描画
}
オプションはタイトルとカラーしか設定していませんが、凡例の設定等もオプションで可能です。詳しくは、公式サイトをご参照ください。
1.htmlと2.jsを1ファイルでまとめると以下のようなhtmlになります。実際の業務で使用する場合は、ajaxでデータを読み込んで、それを動的に表示することが多いかと思います。参考までに。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']}); // チャートの読み込み
google.charts.setOnLoadCallback(drawChart); // onload後にdrawChart関数を呼び出しています。
function drawChart() {
var data = google.visualization.arrayToDataTable([ // データを設定
['年', '訪問者', '購入者'],
['2017', 700, 300],
['2018', 1000, 400],
['2019', 1170, 460],
['2020', 660, 220],
['2021', 1030, 540]
]);
var options = { // オプションを設定
chart: {
title: 'Sample Chart',
subtitle: '2017～2021',
},
colors: ['#0000ff', '#ff00ff']
};
var chart = new google.charts.Bar(document.getElementById('chart_div')); // チャートの生成
chart.draw(data, google.charts.Bar.convertOptions(options)); // 描画
}
</script>
</head>
<body>
<div id="chart_div" style="width: 800px; height: 500px;"></div>
</body>
</html>
上記のhtmlを開くと以下のグラフが表示されます。
googleチャートは、オンラインで使用するシステムに向いていると思います。オプションでグラフの色や凡例の表示位置等の設定もある程度可能です。ただ、わたしが確認したところでは、グラフの単位をY軸の上に表示することができませんでした。（Excel等ではできます。）Excelで実現しているチャートをそのままWeb表示したい等の要望がある場合は、その部分を重点的にGoogle Chartsのオプション等で実現できるか調査してから、使用するとよいかと思います。
C3.jsの使い方
次は、C3.jsについてです。こちらはD3.jsというグラフ描画用のライブラリをベースに使いやすいようにカスタマイズしたchartのライブラリになります。商用利用も可能です。ライセンス規約はご使用の際にご自身でご確認ください。公式ページは、英語になります。
公式サイト：https://c3js.org/
C3.jsもデフォルトでとてもきれいなチャートが描けます。ツールチップ表示もデフォルトで追加されており、簡単に高機能なチャートを描画できます。
C3.jsはオフラインでも使用可能です。そのため、イントラネット等の閉じられたネットワーク上のシステムを開発する際に使用できるのではないかと思います。
描きたいチャートを探す
以下が、公式のChart例のページです。↓
https://c3js.org/examples.html
描きたいチャートを探しましょう。こちらも基本的なチャートは揃っていますので、examplesページを参照することで、ほとんどの場合は描きたいチャートを見つけられるのではないでしょうか。
描きたいチャートが見つかったら、そのチャートで自分がやりたいことが実現可能か調査しましょう。
チャートを描いてみる
C3.jsでもチャートを作成してみます。Bar Chart（棒グラフ）を例にみてみます。グラフライブラリによって、チャートの呼び方が異なりますので、ご注意ください。
C3.jsには、導入方法を説明したページが存在します。まずはそちらを参照しましょう。このページをみれば、どのようにチャートを作成するとよいのかある程度把握できると思います。
https://c3js.org/gettingstarted.html
公式サイトでチャートの生成方法は記載されていますので、ここでは簡単に。
１．HTML
C3.jsでは、cssおよびD3.jsも共に読み込む必要があります。Getting StartedにGithubへのリンクがありますので、そちらからjsをダウンロードします。D3.jsもGithubに落ちてますので、ダウンロードしてください。ただし、C3.jsでは2021年4月現在、v5に対応していますので、D3.jsのv5をダウンロードする必要があります。D3.jsの最新はv6です。
<link rel="stylesheet" href="../js/c3.js/c3.min.css" /> <script src="./c3.js/d3.min.js"></script> <script src="./c3.js/c3.min.js"></script> <div id="sample-chart"></div>
２．js
google Chartsと同じデータを描画してみます。
function drawChart() {
var graphData = [ // データを設定
['year', '2017', '2018', '2019', '2020', '2021'],
['訪問者', 700, 1000, 1170, 660, 1030],
['購入者', 300, 400, 460, 220, 540],
];
let chart = c3.generate({
bindto: '#bar-chart',
size: { height: 600 },
data: {
x: 'year', // 時系列インデックスの項目名
xFormat: '%Y',
columns: graphData,
type: 'bar'
},
bar: {
width: 30 // this makes bar width 100px
},
legend: {
position: 'right' // 凡例を右に表示
},
color: {
pattern: ['#0000ff', '#ff00ff']
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y年'
},
label: {
text: '年',
position: 'outer-center'
},
height: 50,
},
y: {
label: {
text: '人数',
position: 'outer-middle'
},
padding: 0,
}
}
});
}
drawChart();
C3.jsでは、タイトルはグラフの描画範囲に含まれていませんので、自分で作成する必要があります。C3.jsの方が、google chartsよりもより細かくカスタマイズが可能です。x軸やy軸のフォントにもクラスが指定されていますので、サイズや色等は自分でCSSを作成することでカスタマイズ可能です。
詳細は、公式サイトのリファレンスページで確認してみてください。
1.htmlと2.jsを1ファイルでまとめると以下のようなhtmlになります。jQueryなしで動作するチャートライブラリとなっています。
<html>
<head>
<link rel="stylesheet" href="./c3.js/c3.min.css" />
<script src="./c3.js/d3.min.js"></script>
<script src="./c3.js/c3.min.js"></script>
</head>
<body>
<div id="bar-chart" style="width: 800px; height: 500px;"></div>
<script>
function drawChart() {
var graphData = [ // データを設定
['year', '2017', '2018', '2019', '2020', '2021'],
['訪問者', 700, 1000, 1170, 660, 1030],
['購入者', 300, 400, 460, 220, 540],
];
let chart = c3.generate({
bindto: '#bar-chart',
size: { height: 600 },
data: {
x: 'year', // 時系列インデックスの項目名
xFormat: '%Y',
columns: graphData,
type: 'bar'
},
bar: {
width: 30 // this makes bar width 100px
},
legend: {
position: 'right' // 凡例を右に表示
},
color: {
pattern: ['#0000ff', '#ff00ff']
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y年'
},
label: {
text: '年',
position: 'outer-center'
},
height: 50,
},
y: {
label: {
text: '人数',
position: 'outer-middle'
},
padding: 0,
}
}
});
}
drawChart();
</script>
</body>
</html>
前のhtmlで描画されるグラフは以下の通りです。
まとめ
webシステム上で簡単にチャートを描けるライブラリについてでした。数値だけだとわかりにくいのでグラフを表示したいという要望が、たくさんあると思います。
グラフツールも一長一短で、自分が作成したいグラフが、そのツールで簡単に描けるか難しいところですが、現在は様々なライブラリが提供されているので、とても便利になりました。
今回は、そんなチャート作成ライブラリのご紹介でした。参考までに。
コメント