1.柱状图和折线图的数据格式:

 $scope.Chart.data = [
  {
  label: "离线",
  data: [[0, 2]]
}, {
  label: "在线",
  data: [[1, 1]]
  }, {
  label: "空闲",
  data: [[2, 1]]
}
];

2.饼图和环型图的数据格式:

  $scope.ChartData = [
  {label: '测试A', data: 3},
  {label: '测试B', data: 6},
   {label: '测试C', data: 9}
];

3.仪表盘图(比较特殊,跟其他四个数据格式等有明显的差异)的数据格式:

 $scope.gaugeChart.data = {
maxValue: 3000,
animationSpeed: 40,
val: 1375
};

4.图表中的配置问题:

  • tooltip:boolean;   用来控制图表中的小标签是否显示;
  • tooltipOpts:{
    content: "%s , amount:%y.0",
    defaultTheme: false
    }  用来控制标签的显示格式及内容,%s为data.label的内容;%y.0为data的数量;
  • 配置中的以下这两个对象是用来控制X轴Y轴的一些属性;

 xaxis: {
show: false
},
yaxes: {
position: "right",
tickDecimals: 0
} show:boolean, 是否显示; ticks: [[1], [2], [3]], 设置X轴Y轴上刻度;如果只是一个数字,则为将X轴Y轴平分多少份;
ticks: [[0, "zero"], [1, "在线"], [2, "空闲"], [3, "离线"]]定义了X轴的标注;
min: -2,max: 3, 设置最小值、最大值;
tickDecimals: 0, 设置小数点有几位;
  •  以日期作为X轴的参数说明:
 xaxis: {
show: true,
mode: "time",
timeformat: "%y/%m/%d"
},
$scope.data=[[(new Date(1990, 0, 1)).getTime(), 15],[new Date('1990-01-31').getTime(),20]]
  • 在饼图和环型图上显示标签的设置办法:
 series: {
pie: {
show: true,
label: {
show: true,
radius: 1 / 3,
formatter: function (label, series) {
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + series.data[0][1] + '</div>';
},
background: {
opacity: 0.8
}
}
}
}
  • 在柱状图上显示数量:
使用flot-barnumbers:详细介绍网址:https://github.com/joetsoi/flot-barnumbers
1.引入jquery.flot.barnumbers.js
2.在柱状图的配置中,写入:
series: {
stack: true,
bars: {
show: true,
numbers: {
show: true,
yAlign: function (y) {
return y + $scope.maxYData * 0.03;
},
font: {
color: "#000000"
}
}
}
}
  • 多维度统计图:
当是动态获取数据时,会遇到因为是X轴坐标一样而导致多维度的柱子会叠在一起,不是想要的那种挨着的那种效果:可以给X轴坐标加上计算;
虽然柱子可以挨着,但是两个柱子之间加上点间距会更好看一点:给barData的每一个对象都添加一个bars:{barWidth:值};

GitHub英文文档:https://github.com/develersrl/angular-flot

之前使用的是一个flatify.2.2框架,所以好多文件框架中都已经集成过了,所以用起来比较方便;没有这样的集成的话,可能一些定义方法不一样,之后也会总结出来。

angularJs中图表功能(有集成框架)-angular-flot的更多相关文章

  1. angularJs中筛选功能-angular.filter-1

    技术分享:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angular-filter-learn-1/ 以下介绍为自己在使用ang ...

  2. AngularJS中forEach的用法

    AngularJS中当我们需要遍历某个数组的时候,我们会用到forEach语法.AngularJS中forEach的用法如下: angular.forEach(array,function(obj,i ...

  3. 在AngularJS中的使用Highcharts图表控件

    一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...

  4. 【转】【译】JavaScript魔法揭秘--探索当前流行框架中部分功能的处理机制

    推荐语: 今天推荐一篇华为同事的同事翻译的一篇文章,推荐的主要原因是作为一个华为员工居然晚上还能写文章,由不得小钗不佩服!!! 其中的jQuery.angular.react皆是十分优秀的框架,各有特 ...

  5. (译) 在AngularJS中使用的表单验证功能【转】

    验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...

  6. (译) 在AngularJS中使用的表单验证功能

    验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...

  7. 十五、struts2中的拦截器(框架功能核心)

    十五.struts2中的拦截器(框架功能核心) 1.过滤器VS拦截器 功能是一回事. 过滤器是Servlet规范中的技术,可以对请求和响应进行过滤. 拦截器是Struts2框架中的技术,实现AOP(面 ...

  8. AngularJS中最重要的核心功能

    以下是AngularJS中最重要的核心功能: 数据绑定: 模型和视图组件之间的数据自动同步. 适用范围: 这些对象参考模型.它们充当控制器和视图之间的胶水. 控制器: 这些Javascript函数绑定 ...

  9. DRF框架中分页功能接口

    目录 DRF框架中分页功能接口 DRF框架中分页功能接口 一.在框架中提供来三个类来实现分页功能,PageNumberPagination.LimitOffsetPagination.CursorPa ...

随机推荐

  1. Unity3d:加载Format是RGB24位的图片失败(加载图片显示问号)

    问题描述:加载图片显示是个红色的问号,调试发现,Texture的Format=RGB24的都加载失败,ARGB32位的都能成功,按照常规,首先去度娘,看是否有人遇到和我同样的问题,结果一无所获.将用N ...

  2. strlen() 和 sizeof() 在字符串中的使用

    #include <string.h> int _tmain(int argc, _TCHAR* argv[]) { char *pMyChar = "I like coding ...

  3. 为什么要把js代码写到<!--//-->中

    是为了兼容,不支持js的浏览器会把其中的内容当做html注释.

  4. Android LIstView初次创建getview方法执行多次问题

    写listview优化的时候,发现Listview初次创建的时候会多次执行getView方法. <?xml version="1.0" encoding="utf- ...

  5. java String和Date转换

    SimpleDateFormat函数语法:    G 年代标志符  y 年  M 月  d 日  h 时 在上午或下午 (1~12)  H 时 在一天中 (0~23)  m 分  s 秒  S 毫秒  ...

  6. Java常见排序算法之快速排序

    在学习算法的过程中,我们难免会接触很多和排序相关的算法.总而言之,对于任何编程人员来说,基本的排序算法是必须要掌握的. 从今天开始,我们将要进行基本的排序算法的讲解.Are you ready?Let ...

  7. Android中string.xml文件中设置部分字体颜色大小

    1.在string.xml文件中: <string name="tips_all"><Data><![CDATA[清理进程:<font colo ...

  8. document.createElement("A");

    搞了一天,终于把A里面的属性弄出来 代码1: <BODY></BODY><SCRIPT LANGUAGE="JavaScript"><!- ...

  9. MySQL 调优基础:Linux内存管理 Linux文件系统 Linux 磁盘IO Linux网络

    http://www.cnblogs.com/digdeep/category/739915.html

  10. ORCLE INNODB 博客与 innodb_lru_scan_depth

    https://blogs.oracle.com/mysqlinnodb/ http://mysqllover.com/?p=485 •MySQL. MySQL 5.6.10 http://www.m ...