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；