Question

我正在尝试创建一个水平堆积条形图，条形图上有标签（目前使用dataLabels）以及条形图上方的标签。这是一个我创建的JSFiddle，它有点像我想要完成的。在这个例子中，我使用plotLine标签放置标签，但是我很难确定如何在我的实际用例中正确放置条形图，因为我通过Ajax调用获取条形图的数据。

JSFiddle

我已尝试使用stackLabels，plotLine标签以及plotBand标签，但无济于事。如何每次都正确地将标签放在条形图上方？

Answer 1

我会使用plotBands而不是plotLines - 你可以更好地控制波段内的对齐，可以设置为覆盖与条形本身相同的图形部分。

一个例子。

使用您的系列数据：

var series = [{
    name: 'John',
    data: [5]
  },
  {
    name: 'Jane',
    data: [2]
  }, {
    name: 'Joe',
    data: [3]
  }]

我们可以循环并从相同的数据构建plotBands数组：

var bands = [],
    prevData = 0;

$.each(series, function(i,ser) {
    var point = ser.data[0],
            name = ser.name;
    bands.push({
        from: prevData,
        to: (prevData + point),
        color: 'rgba(255,255,255,0)',
        label: {
            text: name,
            align: 'center'
        }
    });
    prevData = (prevData+point);
});

要使此匹配符合绘制的系列的顺序，我们需要在reversedStacks: fals上设置yAxis e，因为默认情况下，Highcharts会反转系列的顺序。然后我们使用生成的数组填充plotBands：

yAxis: {
  reversedStacks: false,
  plotBands: bands
}

通过这种方式，您可以使用plotBands标签属性的完整功能集。

更新了小提琴：

http://jsfiddle.net/jlbriggs/xwzfjbhe/4/

如果您保持相同的格式（series.name，series.data [0]），这会调整以适应您拥有的多个数据点：

http://jsfiddle.net/jlbriggs/xwzfjbhe/5/

还有很多其他方法可以解决这个问题，包括：

labels属性：http://api.highcharts.com/highcharts/labels
renderer函数：http://api.highcharts.com/highcharts/Renderer

如何创建水平堆积条形图，条形图上的标签以及条形图上方的标签？

1 个答案: