1.柱状图和折线图的数据格式:
1 $scope.Chart.data = [ 2 { 3 label: "离线", 4 data: [[0, 2]] 5 }, { 6 label: "在线", 7 data: [[1, 1]] 8 }, { 9 label: "空闲", 10 data: [[2, 1]] 11 } 12 ];
2.饼图和环型图的数据格式:
1 $scope.ChartData = [ 2 {label: '测试A', data: 3}, 3 {label: '测试B', data: 6}, 4 {label: '测试C', data: 9} 5 ];
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轴的一些属性;
1 xaxis: { 2 show: false 3 }, 4 yaxes: { 5 position: "right", 6 tickDecimals: 0 7 } 8 9 show:boolean, 是否显示; 10 11 ticks: [[1], [2], [3]], 设置X轴Y轴上刻度;如果只是一个数字,则为将X轴Y轴平分多少份; 12 ticks: [[0, "zero"], [1, "在线"], [2, "空闲"], [3, "离线"]]定义了X轴的标注; 13 min: -2,max: 3, 设置最小值、最大值; 14 tickDecimals: 0, 设置小数点有几位;
- 以日期作为X轴的参数说明:
1 xaxis: { 2 show: true, 3 mode: "time", 4 timeformat: "%y/%m/%d" 5 }, 6 $scope.data=[[(new Date(1990, 0, 1)).getTime(), 15],[new Date('1990-01-31').getTime(),20]]
- 在饼图和环型图上显示标签的设置办法:
1 series: { 2 pie: { 3 show: true, 4 label: { 5 show: true, 6 radius: 1 / 3, 7 formatter: function (label, series) { 8 return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + series.data[0][1] + '</div>'; 9 }, 10 background: { 11 opacity: 0.8 12 } 13 } 14 } 15 }
- 在柱状图上显示数量:
使用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框架,所以好多文件框架中都已经集成过了,所以用起来比较方便;没有这样的集成的话,可能一些定义方法不一样,之后也会总结出来。