2015-02-07 54 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.