まず、レーダーチャートを導入するにあたって、「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】
まず、2行目のheadに先ほど実装したchart.jsをCDN(Content Delivery Network)で取得する。
- <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>
次に、bodyにレーダーチャートを表示するページの作成を行う。
7行目にレーダーチャートを表示するタブバーの定義を行い、
18行目にビューの作成、 19行目ではコントローラーの指定を行い対応付けを行う。
20～22行目はツールバーの記述、25行目ではグラフの書式設定を行っている。
【JavaScript】
まず、1行目でコントローラの作成を行う。名称はHTMLで定義したRaderChartControllerにする。
- .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]
- }]
- }
- });
- }])
3行目からはこちらhttps://www.webprofessional.jp/introduction-chart-js-2-0-six-examples/を参考にして
レーダーチャートの描く関数の記述である。
 |
| 図4 レーダーチャート画面 |
次回はサンプルデータではなく、実際の検査データの抽出を行い、レーダーチャートに表示を行えるようにしたい。
0 件のコメント:
コメントを投稿