Javascript 在每个栏的旁边显示标签

我需要将每个条的标签（类别）放置在其条的右侧（如所附图像）。 酒吧的数量是从1到20。 暂时的解决办法是

  options.xAxis.labels.align = 'right';
  options.xAxis.labels.rotation = 90;
  options.xAxis.labels.x = 36;
  options.xAxis.labels.y = 7;

但这些条是按比例缩放的，其宽度取决于条数。所以我不能用x和y坐标设置标签位置，它应该是灵活的。 我怎样才能解决这个问题

我该吃什么

如果数据低于我的预期，现在就会发生这种情况

---

正如我在论坛上提到的，您可以使用渲染器，它可以从每个“列组”的最后一列中获得位置。

下面是我如何实现它的（以及我认为@SebastianBochan正在谈论的内容）。首先，禁用类别xAxis标签。然后，在图表的

load

事件中，循环上一系列的点（因为这将是最右边的条），并使用

图表：{
键入：“列”，
活动：{
加载：函数（事件）{
var lastSeries=this.series[this.series.length-1]；
对于（变量i=0；i

演示这种方法。运行多次以查看它如何处理不同的系列长度

编辑评论

要将文本放置在两个条之间，请使用以下内容：

        events: {
            load: function(event){

               var lastSeries = this.series[this.series.length-1]; 
               var firstSeries = this.series[0];

               // barSpace is the spacing between the bars
               var barSpace = (firstSeries.points[1].plotX - lastSeries.points[0].plotX) / 2;

               for (var i = 0; i < lastSeries.points.length; i++){
                    var point = lastSeries.points[i];                       
                   var text = this.renderer.text(
                        categories[i], 
                        this.plotLeft + point.plotX + barSpace - 3,  //3 is a fudge factor it should be 1/2 the text height
                        this.xAxis[0].height - 5
                    ).attr({
                        zIndex: 5,
                        rotation: 90
                    }).add();
                    console.log(text);
                }
            }
        }

事件：{
加载：函数（事件）{
var lastSeries=this.series[this.series.length-1]；
var firstSeries=this.series[0]；
//barSpace是条之间的间距
var barSpace=（firstSeries.points[1].plotX-lastsseries.points[0].plotX）/2；
对于（变量i=0；i

---

更新。

您是否尝试过给酒吧一个固定的宽度？可以给您的提琴，这将帮助我们提供更好的解决方案。添加的JSFIDLE示例如何从每个“列组”的最后一列中获取位置？还有一个问题。我如何将标签准确地排列在列之间的中间？@卡斯特罗，在中间的最后一个组和下一个组的第一个中间之间？还是在垂直于杆的中间？在中间的最后一个组和下一个组的第一个之间。我添加了groupPadding和pointPadding。我的位置有问题

        events: {
            load: function(event){

               var lastSeries = this.series[this.series.length-1]; 
               var firstSeries = this.series[0];

               // barSpace is the spacing between the bars
               var barSpace = (firstSeries.points[1].plotX - lastSeries.points[0].plotX) / 2;

               for (var i = 0; i < lastSeries.points.length; i++){
                    var point = lastSeries.points[i];                       
                   var text = this.renderer.text(
                        categories[i], 
                        this.plotLeft + point.plotX + barSpace - 3,  //3 is a fudge factor it should be 1/2 the text height
                        this.xAxis[0].height - 5
                    ).attr({
                        zIndex: 5,
                        rotation: 90
                    }).add();
                    console.log(text);
                }
            }
        }