堆积条形图在图表中重叠

Question

在 flot 图表中正确绘制堆叠条形图方面需要帮助。不确定为什么我的条形图没有堆叠，我正在动态准备我的数据集。下面是我的数据格式。

[{
     "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个任务，分别是2个和3个计数，所以基本上bar应该在yaxis上绘制到5，但它是重叠的。

Answer 1

我在这个问题上花了很多时间，终于可以 post 解决你所有的问题。

首先，您忘记在索引中包含 <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",
    }];

显示我的解决方案的 plnkr 是 here.

Answer 2

已打开关于 Google 代码的报告，描述问题和可能的修复：

https://code.google.com/p/flot/issues/detail?id=247

在我的例子中，还需要对数据刻度进行排序。

堆积条形图在图表中重叠

Stackbar chart is overlapping in flot chart

javascript

css

angularjs

flot

flot.tooltip