1.首先需要在项目中引入的js文件有

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.pie.min.js"></script>

<script src="../angular-flot.js"></script>

2.饼图的数据结构以及配置:

  // 饼图-环形图数据源
$scope.donutData = [
{
label: "本台资源",
data: 0
}, {
label: "外台资源",
data: 0
}, {
label: "其他资源",
data: 0
}
];
$scope.donutOptions = {
series: {
pie: {
show: true,
innerRadius: 0.5,
label: {
show: false
}
}
},
legend: {
show: false,
noColumns: 1
},
grid: {
clickable: true
},
colors: ["#15bec0", "#967db0", "#fcb981"]
};

3.折线图的数据结构以及配置:

$scope.chartData = [
{
label: "流量大小",
data: [[1,3],[2,4]]
}, {
label: "入库数量",
data: [[3,4],[1,5]]
}, {
label: "视频总长度",
data: [[1,6],[3,5]]
}
];
 $scope.chartOptions = {
series: {
zero: false,
bars: {
show: false
},
lines: {
show: true,
fill: false
},
points: {
show: true,
lineWidth: 1,
fill: true,
fillColor: "#ffffff",
symbol: "circle",
radius: 5
},
shadowSize: 0
},
legend: {
show: false,
noColumns: 8
},
grid: {
clickable: true,
borderWidth: 1,
borderColor: "#eeeeee"
},
colors: ["#15bec0", "#b5a2de", "#fcb981"],
xaxis: {
show: true,
ticks: [],
tickDecimals: 0
},
yaxis: {show: true, tickDecimals: 0}
};

4.饼图数据源:

// 饼图
$scopr.pieData=[
{label: '已完成', data: 23},
{label: '未完成', data: 77}
] $scope.pieChartOptions = {
  series: {
  pie: {
  show: true,
  label: {
show: false,
radius: 1 / 3
}
}
},
legend: {
show: false,
noColumns: 2
},
colors: ['#fe8203', '#e7e9ed']
};  

5.统计图显示方式:<flot style="margin: 0 auto" dataset="donutData" options="donutOptions" height="300px"></flot>

如果需要操作统计图的一些默认,可以在angular-flot中修改directive;

  

  

angularJS图表-angular-flot的更多相关文章

  1. 升级 AngularJS 至 Angular

    Victor Savkin 大神撰写了一系列文章详细介绍如何升级 AngularJS 应用: NgUpgrade in Depth Upgrade Shell Two Approaches to Up ...

  2. 走进AngularJs(一)angular基本概念的认识与实战

    一.前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,作为一名业界新秀,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.当听到AngularJs这个名字并知道是google在维 ...

  3. 夺命雷公狗—angularjs—25—angular内置的方法(高级)

    查看版本信息 angular.version console.log(angular.version); 判断是否相等 angular.equals() var str1 = ''; var str2 ...

  4. AngularJS(17)-Angular小程序

    现在可以开始创建您的第一个 AngularJS 应用程序,一个 AngularJS 单页 Web 应用. <!DOCTYPE html> <html lang="en&qu ...

  5. jQuery图表插件Flot中文文档

    转载自:http://www.itivy.com/ivy/archive/2011/6/4/jquery-flot-chinese-doc.html 最近正在使用JQuery的flot进行画图,但是这 ...

  6. AngularJS方法 —— angular.bootstrap

    描述: 此方法用于手动加载angularjs模板 (官方翻译:注意基于端到端的测试不能使用此功能来引导手动加载,他们必须使用ngapp. angularjs会检测这个模板是否被浏览器加载或者加载多次并 ...

  7. 33.AngularJS 应用 angular.module定义应用 angular.controller控制应用

    转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 模块(Module) 定义了 AngularJS 应用. AngularJS 控制器(Co ...

  8. [AngularJS] ngAnimate angular way !!

    Idea is set up javascript  as an api, then just change html to control the behavor. var app = angula ...

  9. AngularJS方法 —— angular.copy

    描述: 复制一个对象或者一个数组(好吧,万物皆对象,数组也是一个对象). 如果省略了destination,一个新的对象或数组将会被创建出来: 如果提供了destination,则source对象中的 ...

随机推荐

  1. ecshop读写分离

    1.配置文件设置 $db_name = "ecshop"; $prefix = "ecs_"; $timezone = "Europe/Berlin& ...

  2. junit学习(3.x)

    自动化测试 测试所有测试类 import junit.framework.TestCase; import junit.framework.Assert; /** *测试类必须要继承TestCase类 ...

  3. 解决window8 下连接PLSQL 报ora-12154错误

    操作系统版本:window8 64位企业版 数据库:oracle10g2 安装PLSQL,登录PLSQL报ORA-12154错误. 首先:所以需要下载一个32位客户端,我同时也下载了64位客户端,具体 ...

  4. IE6常见bug整理

    By Diaoyude  | 发布时间: 09-08 09:47  | Hits:1,253 | Post in: WEB前端 , Div-Css 针对IE6常见的一些ie6bug,ie6png,E6 ...

  5. application与cache

    每个项目都有一些全局,常用的信息,而这些信息如果在每次使用时都载入,那必将耗费很大的资源,特别是对访问压力大的系统.因此,这个情况中,把这些全局信息放到缓存中是很必要的,放在缓存中可以使得数据能够很快 ...

  6. SQL函数集合

    1. PATINDEX ( '%pattern%' , expression ) 返回pattern字符串在表达式expression里第一次出现的位置,起始值从1开始算. pattern字符串在ex ...

  7. 转载:div和flash层级关系问题

    转自:http://sin581.blog.163.com/blog/static/860578932012813112334404/     问题: ie下默认好像div层级没有flash层级高,也 ...

  8. Java利用Math.random()方法随机生成A-Z的字符

    package reverse; import java.text.DecimalFormat; public class Reverse { public static void main(Stri ...

  9. WinForm设置窗体默认控件焦点

    winform窗口打开后文本框的默认焦点设置,进入窗口后默认聚焦到某个文本框,两种方法: ①设置tabindex 把该文本框属性里的tabIndex设为0,焦点就默认在这个文本框里了. ②Winfor ...

  10. The IAR Archive Tool—iarchive

    The IAR Archive Tool—iarchive—creates and manipulates a library (anarchive) of several ELF object fi ...