angularJs中图表功能（有集成框架）－angular-flot

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框架，所以好多文件框架中都已经集成过了，所以用起来比较方便；没有这样的集成的话，可能一些定义方法不一样，之后也会总结出来。

转载于:https://www.cnblogs.com/maoyazhi/p/5099724.html