Flot：堆叠条形标签重叠/不显示

Question

这是我的 JSFiddle。

问题是堆叠的条重叠/不显示有时堆叠的所有不同标签（参见第一张图表中的第三条）。
不确定，但问题可能是由于以下事实该系列的长度不同，如果没有标签数据，它不包含 0，如 JSFiddle 中的第二个示例？

问：如何让条形标签不重叠？

var newData = [];
  var newLabels = [];
  var newTicks = [];

  for (var i = 0; i < dataFromServer.length; i++) {
    var datapoint = dataFromServer[i];

    var tick = newTicks.indexOf(datapoint.name);
    if (tick == -1) {
      tick = newTicks.length;
      newTicks.push(datapoint.name);
    }

    var index = newLabels.indexOf(datapoint.label);
    if (index == -1) {
      index = newLabels.length;
      newLabels.push(datapoint.label);

      newDataPoint = {
        label: datapoint.label,
        data: []
      };
      newDataPoint.data[tick] = [tick, datapoint.countInbound];
      newData.push(newDataPoint);
    } else {
      newData[index].data[tick] = [tick, datapoint.countInbound];
    }
  }
  for (var i = 0; i < newTicks.length; i++) {
    newTicks[i] = [i, newTicks[i]];
  }
  newLabels = null;

  var newOptions = {
    xaxis: {
      ticks: newTicks
    },
    grid: {
      clickable: true,
      hoverable: true
    },
    series: {
      stack: true,
      bars: {
        show: true,
        align: 'center',
        barWidth: 0.5
      }
    }
  };
  $.plot($("#placeholder2"), newData, newOptions);

Answer 1

要确定堆叠条形图的起始位置，Flot 必须对其下方条形图的高度求和。如果下方有空条（没有高度），则无法计算总和。这导致后面的柱再次从零开始。

为了解决这个问题，插入高度为零的缺失柱：

for (var i = 0; i < newData.length; i++) {
    for (var j = 0; j < newTicks.length; j++) {
        if (newData[i].data[j] === undefined) {
            newData[i].data[j] = [j, 0];
        }
    }
}

查看此更新 fiddle。

Flot：堆叠条形标签重叠/不显示

Flot: Stacked bar labels overlapping / not showing

javascript

arrays

json

flot