Just My Life & My Work

[AngularJS] Angular Chart

2017 年 06 月 30 日

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

分類：

AngularJS, Ionic, 教學

發表留言

Tagged with:

隨意留個言吧：）～

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

Gravatar
WordPress.com 標誌

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

Twitter picture

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

Facebook照片

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

取消

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

標籤雲

%d 位部落客按了讚：