有時候一些數據想要視覺化呈現,讓人看了一目瞭然,如果不想要自己花時間做介面與動畫,那麼就可以考慮第三方套件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。
隨意留個言吧:)~