原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/learn-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>' + 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:值};