浮动:堆叠条形图标签重叠/不显示

Flot: Stacked bar labels overlapping / not showing

本文关键字：重叠 显示 标签 条形图 浮动      更新时间：2023-09-26

这是我的JSFiddle。

问题是堆叠的条形图有时会重叠/不显示堆叠的所有不同标签（请参阅第一个图表中的第三个条形图）
不确定，但是，问题可能是因为序列的长度不相同，并且如果没有标签的数据，它就不包含0，就像JSFiddle中的第二个例子一样？

Q:如何使条形标签不重叠？

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);

要确定堆叠条形图的起点，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];
        }
    }
}

看看这个更新的小提琴。

相关文章：