海军报：叠放酒吧标签重叠/不显示 [英] Flot: Stacked bar labels overlapping / not showing

问题描述

下面是我的的jsfiddle 。

问题是，堆积条形图重叠/不显示有时堆积所有不同的标签（参见第一张图的第三栏）。结果不知道，但，这个问题也许是由于这样的事实，该系列是不是相同的长度和它不包含0，如果在的jsfiddle第二示例的标签没有数据，例如

问：如何让酒吧的标签不重叠

  VAR newData = [];
  变种newLabels = [];
  变种newTicks = [];  对于（VAR I = 0; I＆LT; dataFromServer.length;我++）{
    VAR数据点= dataFromServer [I]    VAR打勾= newTicks.indexOf（datapoint.name）;
    如果（打勾== -1）{
      勾选= newTicks.length;
      newTicks.push（datapoint.name）;
    }    VAR指数= newLabels.indexOf（datapoint.label）;
    如果（指数== -1）{
      指数= newLabels.length;
      newLabels.push（datapoint.label）;      newDataPoint = {
        标签：datapoint.label，
        数据：[]
      };
      newDataPoint.data [剔] = [打勾，datapoint.countInbound]
      newData.push（newDataPoint）;
    }其他{
      newData [指数]。数据[剔] = [打勾，datapoint.countInbound]
    }
  }
  对于（VAR I = 0; I＆LT; newTicks.length;我++）{
    newTicks [I] = [I，newTicks [Ⅰ]];
  }
  newLabels = NULL;  VAR newOptions = {
    x轴：{
      蜱：newTicks
    }，
    网格：{
      点击：真实，
      hoverable：真
    }，
    系列：{
      堆栈：真实，
      酒吧：{
        显示：真实，
        对齐：中心，
        barWidth：0.5
      }
    }
  };
  $ .plot（$（＃PLACEHOLDER2），newData，newOptions）;
 

解决方案

要确定一个堆积条形图开始的地方，FLOT有总结它下面的条的高度。如果有以下（没有高度）空栏不能计算的总和。这导致后来酒吧再次从零开始。

要对付这种插入缺失酒吧为零的高度：

 为（VAR I = 0; I＆LT; newData.length;我++）{
    对于（VAR J = 0; J＆LT; newTicks.length; J ++）{
        如果（newData [I]。数据[J] ===未定义）{
            newData [I]。数据[J] = [J，0];
        }
    }
}
 

请参阅此更新小提琴。

Here's my JSFiddle.

The issue is that the stacked bars overlap / doesn't show all distinct labels stacked sometimes (see third bar in first chart).
Not sure but, the issue is maybe due to the fact that the series is not the same length and it doesn't contain 0 if no data for a label, like in the second example in the JSFiddle?

Q: How can I make the bar labels not overlap?

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

解决方案

To determine where a stacked bar starts, Flot has to sum up the height of the bars below it. If there are empty bars below (with no height) the sum can not be calculated. This leads to later bars again starting at zero.

To counter this insert the missing bars with a height of zero:

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];
        }
    }
}

See this updated fiddle.

这篇关于海军报：叠放酒吧标签重叠/不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！