【OnsenUI・Angular】Chart.jsでグラフ実装 その2【Monaca・ハイブリッドアプリ】
以前のブログで、実装に触れなかったので今回は実装内容を見ていく。
■index.html
htmlではcanvasタグにチャート描画を行う。
js側で拾うために,「id="chart-area"」を付与しておく。
<!DOCTYPE HTML>
<html>
<body>
<!-- チャート描画エリア -->
<div id="home-chart-area">
<canvas id="chart-area"></canvas>
</div>
</body>
</html>■chartController.js
実際にアプリを作成した際の、実装なので具体的に記載してあるが、そこはご勘弁。
ラベルも動的に作成したかったので、ラベル用の配列を作成して、それをチャートオブジェクトに設定。
data自体はserviceで用意しているので、最初は空で用意しておく。
（※ここでdataを用意できる場合はそれでもOK!）
myApp.controller('chartCtrl', function(historyService,chartService) {
// ラベル格納用（ここではサンプルデータを使用）
var chartLabels = ['1','2','3','4'];
var chartData = {
// X軸のラベル
labels: chartLabels,
datasets: [
{
label: "",//項目名
backgroundColor: "rgba(212,244,215,0.2)",//塗りつぶす色
borderColor: "rgba(113,166,113,1)",//線の色
borderPoints: "rgba(113,166,113,1)",//値の点を塗りつぶす色
pointHoverBackgroundColor: "#DC143C",//マウスオーバー時値の点を塗りつぶす色
data: [] // あとで設定するので空で用意
}
]
};
chartService.drawBarChart(historyData,chartData);
});
■chartService.js
今回は棒グラフの積み上げ方式で作成。
データはサンプル。
myApp.service('chartService', function() {
/**
* 積上げチャートを描くための関数
* @param {array} historiItems 履歴情報
* @param {Object} chartData チャート描画用オブジェクト
*/
var drawBarChart = function(historiItems,chartData){
//canvas取得
// index.htmlで指定したidで取得する
var can = document.getElementById("chart-area");
var ctx = can.getContext("2d");
// データを作成(ここではサンプルデータ。)
nameArray = ['hogehoge','hoge','hage','hogehoge'];
dataArray = ['アイウエオ','カキクケコ','さしすせそ','わをん']
//値をChart.jsへ渡す
for(var i = 0; i < nameArray.length; i++){
// 空の連想配列を用意しておかないとエラーになるパターンがある
chartData.datasets[i] = {};
// dataを設定
chartData.datasets[i].data = dataArray[i];
// labelを設定
chartData.datasets[i].label = nameArray[i];
}
//グラフを生成(Bar:棒グラフ)
var myNewChart = new Chart(ctx , {
type: 'bar',
data: chartData,//
options: {
scales: {
yAxes: [{
// y軸を0から開始
ticks: {
beginAtZero:true
},
// 積み上げグラフを有効に
stacked: true
}],
xAxes: [{
// 積み上げグラフを有効に
stacked: true
}]
}
}
});
}
});
こんな感じでできる。
上記ではサンプルデータで例を挙げたけど、実際にはlocalStorageから取得したデータを詰め替えて表示している。
詳しくはアプリ開発の連載で。（最近更新できていないけど）
