【OnsenUI・Angular】Chart.jsでグラフ実装その2【Monaca・ハイブリッドアプリ】

f:id:duo-taro100:20160218004611p:plain

it-innovation.hatenablog.com

以前のブログで、実装に触れなかったので今回は実装内容を見ていく。

■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から取得したデータを詰め替えて表示している。
詳しくはアプリ開発の連載で。（最近更新できていないけど）