#index.html
<ons-template id="country.html">
<ons-page ng-controller="CountryController as country">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">{{ country.name }}</div>
</ons-toolbar>
<ons-list class="year-select-container">
<ons-list-item>
<select
ng-model="country.year"
ng-options="year for year in country.years"
class="text-input text-input--transparent"
style="width: 100%; margin-top: 4px">
</select>
</ons-list-item>
</ons-list>
<population-chart ng-if="country.showChart" data="country.population"></population-chart>
</ons-page>
</ons-template>
3行目の<ons-toolbar></ons-toolbar>でアプリのツールバーを作成している。4行目でツールバーの左側に「Back」ボタンを表示するようにして、5行目では、国名が中央に表示されるようにしている。
8行目の<ons-list class=”year-select-container”>はOnsen-UIでリスト（箇条書き）を作成するときに用いるコンポーネントである。リストの個々の項目は<ons-list-item>～</ons-list-item>の中に書く。それが10行目～14行目の<select>タグである。これは、人口をグラフ表示する際の西暦年を選択するための選択ボックスを定義している。<select>タグ内の属性ng-modelにはCountryController内で定義しているコントローラのプロパティcountry.yearを設定しているが、これが選択ボックスのデフォルト値になる。ちなみにコントローラ内でこのプロパティ（this.year）には現在の西暦年が設定されている。ng-optionsは選択ボックスのオプション（選択肢）を生成するAngularJSのディレクティブで、”year for year in country.years”が、コントローラのプロパティcountry.years配列から西暦年を取り出して<option>タグを生成している。ちなみに、”year for year in country.years”は、country.years配列から一つずつ配列要素を取り出してきてそれをyearに設定し、そのyearを使って<option value="year">year</select>タグを生成するといった意味である。
19行目の<population-chart></population-chart>は、本アプリで独自にAngularJSのdirectiveメソッドを用いて作成しているタグ（下記index.jsの132～181行目）で、nvd3.jsライブラリを用いてグラフを作成するように定義されている。AngularJSのdirectiveメソッドはHTMLに独自のタグを追加する機能があり、これによってHTMLの拡張が可能になる。19行目だけでグラフを作っているのは驚くべきことである。
#index.js
angular.module('app', ['onsen'])
.controller('CountriesController', ['$scope', 'Countries', function($scope, Countries) {
var that = this;
Countries.get()
.then(
function(countries) {
that.list = countries;
}
);
this.showCountry = function(country) {
//$scope.navi.pushPage('country.html', {data: {name: country}});
navi.pushPage('country.html', {data: {name: country}});
};
}])
.controller('CountryController', ['$scope', 'Population', function($scope, Population) {
var that = this;
this.name = $scope.navi.topPage.data.name;
this.showChart = false;
$scope.navi.on('postpush', function() {
$scope.$evalAsync(function() {
that.showChart = true;
});
$scope.navi.off('postpush');
});
var currentYear = (new Date()).getUTCFullYear();
this.year = currentYear + '';
this.years = [];
for (var i = 1950; i <= 2100; i++) {
this.years.push('' + i);
}
this.getPopulation = function() {
Population.get(this.name, this.year)
.then(
function(population) {
that.population = population;
}
);
};
$scope.$watch('country.year', function() {
that.getPopulation();
});
}])
.service('Countries', ['$http', function($http) {
this.get = function() {
return $http.get('countries.json')
.then(
function(response) {
return response.data.countries;
}
);
};
}])
.service('Population', ['$http', function($http) {
this.get = function(country, year) {
return $http.jsonp('http://api.population.io:80/1.0/population/' + year + '/' + country + '/?format=jsonp&callback=JSON_CALLBACK')
.then(
function(response) {
return response.data;
}
);
};
}])
.factory('nv', function() {
return nv;
})
.factory('d3', function() {
return d3;
})
.controller('PopulationChartController', ['$scope', function($scope) {
$scope.formatData = function() {
if (!$scope.data) {
return [];
}
var total = [],
males = [],
females =[];
for (var i = 0; i < $scope.data.length; i++) {
var data = $scope.data[i];
total.push({x: data.age, y: data.total});
males.push({x: data.age, y: data.males});
females.push({x: data.age, y: data.females});
}
return [
{
key: 'Total',
values: total
},
{
key: 'Women',
values: females
},
{
key: 'Men',
values: males
}
];
};
$scope.$on('chartloaded', function(event) {
event.stopPropagation();
$scope.updateChart($scope.formatData());
$scope.$watch('data', function() {
if ($scope.data) {
$scope.updateChart($scope.formatData());
}
});
});
}])
.directive('populationChart', ['nv', 'd3', function(nv, d3) {
return {
restrict: 'E',
scope: {
data: '='
},
controller: 'PopulationChartController',
link: function(scope, element, attrs) {
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
element.append(svg);
var chart;
scope.updateChart = function(data) {
d3.select(svg)
.datum(data)
.call(chart);
};
nv.addGraph(function() {
chart = nv.models.stackedAreaChart()
.useInteractiveGuideline(true)
.showControls(false)
.margin({left: 50, right: 30});
chart.xAxis
.tickFormat(d3.format(',r'));
chart.yAxis
.tickFormat(function(d) {
if ((d / 1000000) >= 1) {
d = Math.round(d / 100000) / 10 + 'M';
}
else if ((d / 1000) >= 1) {
d = Math.round(d / 100) / 10 + 'K';
}
return d;
});
nv.utils.windowResize(function() {
chart.update();
});
scope.$emit('chartloaded');
return chart;
});
}
}
}]);
19行目～52行目はコントローラCountryControllerの定義である。先に見た西暦年選択ボックス作成のために必要となるデータが定義されている。32行目でcurrentYearに現時点の西暦年を4桁で設定している。33行目はyearにcurrentYearの値に空文字('')を結合することで、数値型を文字列型に変換している。
35行目でyearsを空の配列に初期化し、36行目～38行目のfor文でiを1950～2100の範囲で1ずつ増やしながらyears配列に追加（push）している。こうして西暦年配列yearsが作られ、先に見た<select>タグのng-options属性で<option>タグを生成するのに用いられている。このようにAngularJSのコントローラとHTMLのng-で始まるディレクティブは相互に関連付けられている。
132行目はdirectiveメソッドを用いて、populatationChartというタグ（カスタムディレクティブ）の定義を行っており、この中でNVD3というグラフィックライブラリを用いてグラフを生成している。
133行目にあるように、directiveメソッドの本体部分は、return命令で133行目～180行目に定義されたオブジェクトを返すだけの処理からなっている。
では、このreturn命令がどのようなオブジェクトを返しているかを見てみよう。
まず、134行目のrestrictは、HTMLの中でこのディレクティブをどのように使うかを指定する。「E」はタグ（コンポーネント）として使うことを指定している。
135行目～137行目のscopeは、ディレクティブに独自のスコープを定義するためのものである。136行目のdata:'＝'は、HTML内に書いたdata属性を、ディレクティブ内のdata属性と同じにすることを指定している（双方向バインディング）。
138行目は、このディレクティブを「PopulationChartController」というコントローラと連携させることを意味している。このディレクティブで定義したタグ内の属性で「ng-controller="PopulationChartController"」と記述するのと同義である。
そのPopulationChartControllerはHTMLのdata属性に指定されたデータを用いてグラフィックライブラリNVD3が使うデータフォーマットに変換することを主な機能とするコントローラで、84行目～116行目にかけて定義されている。
139行目のlinkはディレクティブにおいて一番重要な部分であり、タグの役割、機能を定義している。functionという記述から、関数として定義されている。HTMLでPopulationChartを呼び出すと、この関数が実行される。この関数を実行すると139行目から179行まで実行され、return chartで結果をグラフで返す処理を行う。
140行目のdocument.createElementNSというのは、HTMLのタグ（DOMという）を動的に作っているというものである。ここではsvgタグというものを作っている。svgタグというものは、グラフを作るためのXMLタグであり、グラフを描画するときには必ず使うものである。
145行目～149行目はUpdateChart関数の定義であり、グラフを更新する際にこの関数が呼び出される。
146行目でsvgタグの選択を行い、147行目でデータを与えて、148行目でチャート（グラフ）を生成している。
151行目以降はグラフの追加を行っている記述であるのだが、少々小難しく、理解しづらかったため、似たようなサンプルプログラムを活用し、理解を深めていく。
#NVD3.jsを使ってみるのサンプルデータから
<link href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css" rel="stylesheet" type="text/css">
<body>
<div id="chart">
<svg style="height:500px;" />
</div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.js"></script>
<script type="text/javascript">
nv.addGraph(function() {
//var chart = nv.models.historicalBarChart();
//var chart = nv.models.lineWithFocusChart();
var chart = nv.models.lineChart();
chart.xAxis.tickFormat(d3.format(',f'));
chart.yAxis.tickFormat(d3.format(',.2f'));
d3.select('#chart svg')
.datum(testData())
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
function testData() {
return [{color:'red',
key:'hoge',
values: [{x:1,y:100},
{x:2,y:130},
{x:3,y:90},]},
{color:'blue',
key:'hage',
values: [{x:1,y:70},
{x:2,y:60},
{x:3,y:80},
{x:4,y:90}]}];
}
</script>
</body>
4行目は、グラフィックライブラリNVD3でグラフを描画するのに使うsvgタグである。11行目～27行目がグラフを書いている本体である。
16行目はグラフのx軸の目盛りのフォーマット指定部分である。ここでは実数形式にすることを指定している
17行目はグラフのy軸の目盛りフォーマット指定である。ここでは、小数点以下2桁まで表示するように指定している。
19行目～23行目は4行目のsvgタグにテストデータを入れ、チャートを作っている部分である。
19行目はスタイルシートで使うセレクタを使って4行目のsvgタグをグラフを埋め込むタグとして選択している。セレクタでは接頭語の#はidを意味するので、セレクタ'#chart svg'は、idがchartのタグ（すなわち3行目のdivタグ）の中にあるsvgタグ(すなわち4行目)を表している。
20行目は29行目～41行目で定義されたテストデータをグラフ描画の対象データに設定している。
22行目はグラフの描画を行っている。
先にも書いたように、29行目～41行目は折れ線グラフのデータを定義している。データは2系列あり、配列要素として格納されている。各系列のデータにはcolor属性、key属性、values属性があり、それぞれグラフの色、系列名、グラフを構成する（x, y）座標の配列を表している。
NVD3でグラフを作成する場合はこのフォーマットに変換すればよいことがわかる。
この観点でアプリのソースコードを眺めると、index.jsのPopulationChartControllerでNVD3のデータを作成しているのがわかる。90行目～92行目にかけて、total, males, femalesの3つの配列を定義し、94行目～100行目のfor文でdata属性のageをx座標に、人数（total, males, females）をy座標にした点オブジェクトを各々の配列に追加（push）している。そして、最後に102行目～116行目でNVD3のフォーマット（key属性とvalues属性）にしてreturnしている。こうして3系列（合計、男性、女性の人口）のデータを作成していることがわかる。
#NVD3を使って、AngularJSで作ったハイブリッドアプリのグラフを統合しようより
HTML
<div ng-app="app" ng-controller="MyController as main">
<line-chart height="250px" data="main.data"></line-chart>
<h3>Change the values: </h3>
<p ng-repeat="datum in main.data[0].values">
<input type="number" ng-model="datum.y">
</p>
</div>
JavaScript
angular.module('app', [])
.controller('MyController', ['$scope', function($scope) {
this.data = [{
key: 'Data',
values: [{
x: 0,
y: 0
}, {
x: 1,
y: 1
}, {
x: 2,
y: 4
}, {
x: 3,
y: 9
}, {
x: 4,
y: 16
}, {
x: 5,
y: 25
}]
}];
}]);
HTML（上図）の2行目にある<line-char>タグ
0 件のコメント:
コメントを投稿