有時候一些數據想要視覺化呈現，讓人看了一目瞭然，如果不想要自己花時間做介面與動畫，那麼就可以考慮第三方套件Angular Chart。
將套件匯入專案後，幾個設定就能在畫面上呈現～
而我使用最常用到的長條圖，在手機螢幕大小呈現如⋯⋯
這麼設定controller和view就能出現我們預期的結果囉～
- controllers.js
.controller(‘HistoryDetail2Ctrl’, function($scope, $stateParams, Records) {
$scope.labels =[“肌肉運動", “認知記憶", “人際溝通", “邏輯教學", “創意想像"];
$scope.labels2 =[“肌肉運動2″, “認知記憶2″, “人際溝通2″, “邏輯教學2″, “創意想像2″];$scope.data = [
[65, 59, 190, 81, 56]
];
$scope.data2 = [
[28, 48, 40, 19, 96]
];
})
- HistoryDetail2.html
/**
Theme: Angular Chart
IDE: Chrome + Sublime
Language: AngularJS
Date: 106/01/14
Author: HappyMan
Blog: https://cg2010studio.wordpress.com/
*/
<div class="mediaRect">
<canvas id="base" class="chart-bar" chart-data="data" chart-labels="labels" >
</canvas></div>
<div class="mediaRect">
<canvas id="base" class="chart-bar" chart-data="data2" chart-labels="labels2" >
</canvas></div>
套件有提供十種左右的圖表類型：Line Chart、Bar Chart、Doughnut Chart、Radar Chart、Pie Chart、Polar Area Chart、Horizontal Bar Chart、Bubble Chart、Dynamic Chart。
參考：Angular Chart。
廣告
發表留言