[英]Stackbar chart is overlapping in flot chart
在浮點圖中正確繪制堆積的條形圖時需要幫助。 不知道為什么我的酒吧不堆疊,我正在動態地准備我的數據集。 以下是我的數據格式。
[{
"data": [
[1415491200000, 1],
[1415577600000, 2],
[1415750400000, 1]
],
"label": "MANG",
"bars": {
"show": "true",
"barWidth": 36000000,
"fillColor": "#FFEE11",
"order": 1,
"align": "center"
},
"stack": true
}]
圖表選項
{
xaxis: {
mode: "time",
timeformat: "%m/%d/%y",
minTickSize: [1, "day"]
},
grid: {
labelMargin: 10,
hoverable: true,
borderWidth: 0
},
series: {
stack: true
},
colors: colorCodes,
tooltip: true,
legend: {
show: true,
noColumns: 0, // number of colums in legend table
labelFormatter: null, // fn: string -> string
labelBoxBorderColor: "#888", // border color for the little label boxes
container: "#adoptionLegendContainer", // container (as jQuery object) to put legend in, null means default on top of graph
position: "nw", // position of default legend container within plot
margin: [5, 10], // distance from grid edge to default legend container within plot
backgroundOpacity: 0 // set to 0 to avoid background
}
}
請幫忙。 這是一個塞子鏈接
注意 :在11/26/14中有2個任務,分別是2個和3個計數,因此基本上,條形圖應在y軸上繪制到5,但是它是重疊的。
我花了很多時間在這個問題上,最終可以為您解決所有問題。
首先,您忘記在索引中包含<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.stack.min.js"></script>
。 這意味着堆積圖並沒有真正繪制出來。 其次,我稍微清理了您的數據,並刪除了數據中不必要的重復聲明。 然后,在包含堆棧腳本之后,我修復了鼠標懸停時顯示的任務數量不正確的問題。
最后,我試圖找出為什么flot重疊,並得出以下結論:flot不知道如何處理長度可變的數據序列。 這意味着,如果您有3個數據系列,每個數據系列的長度不同,則這些條看上去似乎是隨機的,彼此重疊。 但是,如果您確保所有系列的長度均相同,則條形圖堆疊不會出現問題。
我認為最好的解決方案是在服務器端確保所有系列的長度相同,並且每個數據滴答處都有一個值。 理想情況下,您應在所有系列中添加零值,這些系列在數據滴答處缺少值,並確保所有系列的長度相同。
這是我的解決方案的代碼:
數據和選項:
$scope.tasksRunChartOptions = {
xaxis: {
mode: "time",
timeformat: "%m/%d/%y",
minTickSize: [1, "day"]
},
grid: {
labelMargin: 10,
hoverable: true,
borderWidth: 0
},
series: {
stack: true,
"bars":{
"show":"true",
"barWidth":36000000,
"order":1,
"align":"center"
}
},
colors: colorCodes,
tooltip: true,
legend: {
show: true,
noColumns: 0, // number of colums in legend table
labelFormatter: null, // fn: string -> string
labelBoxBorderColor: "#888", // border color for the little label boxes
container: "#adoptionLegendContainer", // container (as jQuery object) to put legend in, null means default on top of graph
position: "nw", // position of default legend container within plot
margin: [5, 10], // distance from grid edge to default legend container within plot
backgroundOpacity: 0 // set to 0 to avoid background
}
};
$scope.translate = function(value) {
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var myDate = new Date(value);
return myDate.getDate() + " " + monthNames[myDate.getMonth()] + " " + myDate.getFullYear();
}
$scope.reportTasksRunRange = {
min: 1415059200000,
max: 1418342400000,
floor: 1415059200000,
ceil: 1418342400000,
step: (1412467200000 - 1412380800000)
};
$scope.tasksRunData = [
{
"data":
[[1415491200000,1],[1415577600000,3],[1415664000000,2],[1415750400000,1],[1415836800000,3],[1415923200000,1],[1416009600000,7],[1416096000000,2],[1416268800000,2],[1416441600000,1],[1416528000000,12],[1416787200000,1],[1416873600000,1],[1416960000000,3],[1417046400000,2],[1417132800000,2],[1417392000000,4],[1417478400000,3],[1417737600000,1],[1417910400000,4],[1417996800000,6],[1418083200000,2],[1418169600000,4],[1418256000000,3]],
"label":"ICS-MANG"
},
{
"data":
[[1415491200000,2],[1415577600000,3],[1415664000000,3],[1415750400000,1],[1415836800000,1],[1415923200000,2],[1416009600000,15],[1416096000000,4],[1416268800000,1],[1416441600000,3],[1416528000000,1],[1416787200000,1],[1416873600000,1],[1416960000000,3],[1417046400000,3],[1417132800000,2],[1417392000000,4],[1417478400000,3],[1417737600000,3],[1417910400000,1],[1417996800000,6],[1418083200000,5],[1418169600000,4],[1418256000000,3]],
"label":"Neeraj_secure"
},
{
"data":
[[1415491200000,2],[1415577600000,3],[1415664000000,3],[1415750400000,1],[1415836800000,1],[1415923200000,3],[1416009600000,1],[1416096000000,2],[1416268800000,4],[1416441600000,1],[1416528000000,1],[1416787200000,1],[1416873600000,1],[1416960000000,3],[1417046400000,4],[1417132800000,2],[1417392000000,4],[1417478400000,3],[1417737600000,7],[1417910400000,20],[1417996800000,6],[1418083200000,4],[1418169600000,4],[1418256000000,3]],
"label":"Bkrishna",
}];
有一份關於Google Code的報告,描述了該問題和可能的解決方法:
https://code.google.com/p/flot/issues/detail?id=247
以我為例,也有必要對數據滴答進行排序 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.