Just a Computer Graphics Studio & My Life

[AngularJS] Angular Chart

有時候一些數據想要視覺化呈現,讓人看了一目瞭然,如果不想要自己花時間做介面與動畫,那麼就可以考慮第三方套件Angular Chart

Angular Chart Radar Chart.png

將套件匯入專案後,幾個設定就能在畫面上呈現~

angular-chart-radar-chart00001angular-chart-radar-chart00002angular-chart-radar-chart00003

而我使用最常用到的長條圖,在手機螢幕大小呈現如⋯⋯

Angular Chart bar.png

這麼設定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

廣告

發表留言

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

標籤雲

%d 位部落客按了讚: