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

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軸的參數說明：

xaxis: {
show: true,
mode: "time",
timeformat: "%y/%m/%d"
},
$scope.data=[[(new Date(1990, 0, 1)).getTime(), 15],[new Date('1990-01-31').getTime(),20]]

• 在餅圖和環型圖上顯示標簽的設置辦法：

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:值}；

 GitHub英文文檔：https://github.com/develersrl/angular-flot

之前使用的是一個flatify.2.2框架，所以好多文件框架中都已經集成過了，所以用起來比較方便；沒有這樣的集成的話，可能一些定義方法不一樣，之后也會總結出來。