如何创建水平堆叠的条形图，在条形图上本身以及条形图上的标签？

我将使用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: false yAxis，因为默认情况下，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