コラム一覧へ

Webシステムでグラフ表示を行う方法

[inline]
<p>
最近の業務用のWebシステムではグラフ表示を取り入れる機会が増えてきました。
<br />
</p>
[script src="http://www.cmpd.jp/blog/Chart.min.js"][/script]
<style>
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
#pieLegend {
padding: 10px;
overflow: hidden;
position: relative;
}
ul.pie-legend {
list-style: none outside none;
float: left;
margin: 0 0 0 0;
padding: 0;
position: relative;
left: 50%;
}
ul.pie-legend > li {
float: left;
margin-right: 5px;
padding: 5px;
position: relative;
left: -50%;
}
</style>
<div id="chartArea" class="center">
<canvas id="pieArea" height="260" width="260"></canvas>
<div id="pieLegend"></div>
</div>
[script]
var datasets = [
{
value: 30,
color:"#aaf2fb",
lineColor: "#aaf2fb",
label:"最初の分類"
},
{
value : 50,
color : "#ffb6b9",
lineColor : "#ffb6b9",
label:"次の分類"
},
{
value : 120,
color : "#ffe361",
lineColor : "#ffe361",
label:"3番目の分類"
},
{
value : 170,
color : "#fbaa6e",
lineColor : "#fbaa6e",
label:"4番目の分類"
}

];
var options = {
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\">&nbsp;&nbsp;&nbsp;</span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
};
var myPie = new Chart(document.getElementById("pieArea").getContext("2d")).Pie(datasets, options);
document.getElementById("pieLegend").innerHTML = myPie.generateLegend();
[/script]
<p> ほんの数年前はグラフ表示のライブラリは、高価だったり使いにくかったりと良いものが見当たらなかったのですが、現在は見た目も機能性も素晴らしいオープンソースのライブラリが多数登場してきています。</p>
<p> 私が最もWebの業務システムに適していると思うのはchart.jsと言うライブラリ。上のサンプルのとおり、デザイン性に優れています。グラフ表示の際のアニメーションも良好です。ライブラリ自体をサイトに配置するので、ライブラリのアップデートやサービス終了を気にすること無く運用できます。</p>
<p> 分析のためのグラフ描画は、どうしても大量のデータアクセスがついて回るので、設計には考慮が必要です。例えば、1年間の売上で商品種類毎の比率を見るには、1年間の全ての売上データにアクセスする必要があります。</p>
<p> データ量が多い場合や同時利用数が多い場合等、どうしても負荷が高い場合は、業務用のデータベースサーバーと分析用のデータベースサーバーを分離する方法が有効です。現状でデータ量が少なく、ビジネスの成長と合わせてデータ量が増えていくことが見込まれる場合は、論理的に別サーバーで動作するようにデータベースを設計しておき、当初は1台のサーバーに配置する方式をとります。</p>
[/inline]
<img src="http://www.cmpd.jp/sy/wp-content/uploads/2016/05/chart.png" alt="chart.jpサンプルグラフ" width="600" height="443" class="alignnone size-full wp-image-68" />


お問い合わせ

システムやアプリの開発のご相談、サービスに関するご質問など、どのようなことでもお気軽にお問い合わせください。