angularJS图表-angular-flot
2024-10-12 12:10:34
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；
最新文章
- IplImage, CvMat, Mat 的关系和相互转换(转)
- css3 自定义动画（2）位置的移动
- PHP_01之PHP概述、数据、语法
- 怎样将BigDecimal转换成Int
- 转：python webdriver API 之 验证码问题
- Objective-C description的用法
- offie2010设置前两页和后面显示不同页码的方法
- IOS 多线程，线程同步的三种方式
- 如何删除windows服务（sc.exe删除和注册表删除两种方法）
- VCC、VDD、VEE、VSS
- git commit的--amend选项
- uva 10817 Headmaster&#39;s Headache 出发dp 位计算
- Mybatis映射文件完整模板参照
- SpringMVC---@RequestMapping
- 按PEP8风格自动排版Python代码
- Python-接口自动化（十）
- Class "xxxxx"defined without specifying a base class
- java.lang.ClassCastException: com.sun.proxy.$Proxy* cannot be cast to***
- C# 委托和泛型
- bzoj1001狼抓兔子
热门文章
- ACM数学问题分类（汇总帖）
- iOS7 各种问题解决
- Python之函数进阶
- gitignore无效最简单解决办法
- 学习JQuery中文文档之get()函数
- C++经典面试题
- 关于java.lang.IllegalArgumentException: View not attached to window manager 错误的分析
- 007_尚学堂_高明鑫_android 之项目的打包apk与apk的反编译
- Python之美[从菜鸟到高手]--深刻理解原类(metaclass)
- [MEAN Stack] First API -- 1. with Node.js, Express and MongoDB