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. JavaScript神一样的变量系统

    话说上一篇介绍了JavaScript故事版的身世之谜.看官你估计也明白JavaScript出生之时,就未曾托于重任.布兰登-艾奇估计也没料到今天的JavaScript变得如此重要.要不然,当年他也不会 ...

  2. Spring REST实践之客户端和测试

    RestTemplate 可参考spring实战来写这部分. RestTemplate免于编写乏味的样板代码,RestTemplate定义了33个与REST资源交互的方法,涵盖了HTTP动作的各种形式 ...

  3. How to bind to data when the DataContext is not inherited【项目】

    http://www.thomaslevesque.com/2011/03/21/wpf-how-to-bind-to-data-when-the-datacontext-is-not-inherit ...

  4. StringUtils 字符串工具类

    package com.thinkgem.jeesite.common.utils; import java.io.File; import java.io.IOException; import j ...

  5. putty 中文乱码解决方法

    解决putty.exe 中文乱码的问题 export NLS_LANG="AMERICAN_AMERICA.ZHS16GBK"

  6. cocos2d-x 用浏览器打开网页

    转自:http://www.xuebuyuan.com/1396292.html,http://www.cocoachina.com/bbs/read.php?tid=88589 First!! 源代 ...

  7. Hadoop on Mac with IntelliJ IDEA - 8 单表关联NullPointerException

    简化陆喜恒. Hadoop实战(第2版)5.4单表关联的代码时遇到空指向异常,经分析是逻辑问题,在此做个记录. 环境:Mac OS X 10.9.5, IntelliJ IDEA 13.1.5, Ha ...

  8. 记一次Time-Wait导致的问题

    去年(2014年)公司决定服务框架改用Finagle(后续文章详细介绍),but 公司业务系统大部分是C#写的,然后 finagle只提供了 scala/java 的Client 于是 只能自己动手丰 ...

  9. Codeforces Round #146 (Div. 1) B. Let's Play Osu! dp

    B. Let's Play Osu! 题目连接: http://www.codeforces.com/contest/235/problem/B Description You're playing ...

  10. [NOIP 2014复习]第三章:动态规划——NOIP历届真题回想

    背包型动态规划 1.Wikioi 1047 邮票面值设计 题目描写叙述 Description 给定一个信封,最多仅仅同意粘贴N张邮票,计算在给定K(N+K≤40)种邮票的情况下(假定全部的邮票数量都 ...