まず、レーダーチャートを導入するにあたって、「chart.js」の実装が必要という事が分かった。
そこでこちらをhttps://press.monaca.io/atsushi/230参考にしてchart.jsの実装を行っていく。
まず、MONACAの設定タブからJS/CSSコンポーネントの追加と削除をクリックする。
 |
| 図1JS/CSSコンポーネント検索画面 |
 |
| 図2 追加をクリックした際のポップアップ |
その後、上記図2の様なポップアップが表示されるのでインストールをクリックする。
 |
| 図3 ファイル選択画面 |
インストールをクリックすると、上記図3の様なchart.js内で読み込みを行うファイルの選択を行う事が出来るので、
「components/chart.js/dist/Chart.min.js」にチェックを入れ、保存をする。
これでChart.jsの導入が完了したので、プログラムの修正を行っていく。
【HTML】
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
：
中略
：
<body>
<ons-template id="tab.html">
<ons-page>
<ons-tabbar>
<ons-tab page="radarchart.html" label="レーダーチャート" icon="ion-ios-pie-outline">
</ons-tab>
</ons-tabbar>
</ons-page>
</ons-template>
:
中略
:
<ons-template id="radarchart.html">
<ons-page ng-controller="RaderChartController as raderchart">
<ons-toolbar>
<div class="center">レーダーチャート</div>
</ons-toolbar>
<div id="canvas-holder" style="width:100%">
<h1>Bar chart</h1>
<canvas id="pie-chart-area" width="300" height="300">
</canvas>
</div>
</ons-page>
</ons-template>
まず、2行目のheadに先ほど実装したchart.jsをCDN(Content Delivery Network)で取得する。次に、bodyにレーダーチャートを表示するページの作成を行う。
7行目にレーダーチャートを表示するタブバーの定義を行い、
18行目にビューの作成、 19行目ではコントローラーの指定を行い対応付けを行う。
20～22行目はツールバーの記述、25行目ではグラフの書式設定を行っている。
【JavaScript】
.controller('RaderChartController', ['$scope', 'Countries', function($scope, Countries) {
var that = this;
//レーダーチャート
var ctx = document.getElementById("pie-chart-area");
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ["M", "T", "W", "T", "F", "S", "S"],
datasets: [{
label: 'apples',
backgroundColor: "rgba(153,255,51,0.4)",
borderColor: "rgba(153,255,51,1)",
data: [12, 19, 3, 17, 28, 24, 7]
}, {
label: 'oranges',
backgroundColor: "rgba(255,153,0,0.4)",
borderColor: "rgba(255,153,0,1)",
data: [30, 29, 5, 5, 20, 3, 10]
}]
}
});
}])
まず、1行目でコントローラの作成を行う。名称はHTMLで定義したRaderChartControllerにする。3行目からはこちらhttps://www.webprofessional.jp/introduction-chart-js-2-0-six-examples/を参考にして
レーダーチャートの描く関数の記述である。
 |
| 図4 レーダーチャート画面 |
次回はサンプルデータではなく、実際の検査データの抽出を行い、レーダーチャートに表示を行えるようにしたい。
0 件のコメント:
コメントを投稿