angular-flot学习总结
2016-02-26 08:43
761 查看
原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/learn-angular-flot/
1.柱状图和折线图的数据格式:
2.饼图和环型图的数据格式:
3.仪表盘图(比较特殊,跟其他四个数据格式等有明显的差异)的数据格式:
4.图表中的配置问题:
配置中的以下这两个对象是用来控制X轴Y轴的一些属性;
以日期作为X轴的参数说明:
在饼图和环型图上显示标签的设置办法:
在柱状图上显示数量:
多维度统计图:
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轴的参数说明:
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:值};
相关文章推荐
- angular-flot学习总结
- 探索angularjs+requirejs全面实现按需加载的套路
- AngularJS 之 ngGrid
- 【AngularJS学习笔记】01 指令、服务和过滤器
- #学习笔记#(46)6步搭建Angular项目
- AngularJS进阶(三十四)Angular数据更新不及时问题探讨
- AngularJS进阶(三十四)Angular数据更新不及时问题探讨
- AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法
- AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法
- AngularJS 与 RequireJs 集成
- AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
- AngularJS常见问题答疑
- angularJs - cynthia娆墨旧染-响应式文章发布系统
- AngularJS 第四天----控制器
- angularjs的touch事件
- AngularJS
- angular同一个页面多个controller值传递
- angularJs实现信息数据提交功能
- 搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo
- AngularJS整合Springmvc、Spring、Mybatis搭建开发环境