2015-02-07 57 views
0

在堆積圖中正確繪製堆積的柱狀圖需要幫助。不知道爲什麼我的酒吧不堆疊,我正在動態地準備我的數據集。以下是我的數據格式。堆積欄圖表在塊圖中重疊

[{ 
    "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 
    } 
} 

請幫助。 here is a plunker link

注意:在14年11月26日分別有2首和3個計數2級的任務,所以基本上條應該繪製直到5 Y軸,但重疊。

回答

2

我在這個問題上花了很多時間,最終可以解決所有問題。

首先你忘了在你的索引中包含<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.stack.min.js"></script>。這意味着堆疊圖表werent真的被繪製。其次我清理了一下你的數據,並刪除了不必要的數據雙重聲明。然後在包含堆棧腳本後,我修復了顯示不正確數量任務的鼠標懸停。

最後,我試圖找出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", 
    }]; 

和顯示我的解決方案plnkr是here.