Highcharts条形图-在绘图的右端显示数据标签

我需要数据标签始终显示在条形图的右端，而不考虑数据值。根据Highcharts API，dataLabel位置只能相对于其当前位置进行调整。是否有方法更改相对于图表区域的datalabel位置？

您正在寻找类似的内容

如果您选择了SVG元素而不是

plotOptions：{
酒吧：{
数据标签：{
启用：对，
allowOverlap：是的，
//如果我们从SVG切换到HTML，标签更容易移动：
是的，
}
}
}

…使用CSS很容易移动它们：

.highcharts-data-labels.highcharts-bar-series{
/*将标签容器拉伸到整个图表区域：*/
右：0；
}
.highcharts-label.highcharts-data-label，
.highcharts-label.highcharts-data-label span{
/*禁用默认标签放置*/
左：自动！重要；
/*..然后把它们放在容器的右侧*/
右：8px；
}

---

你在找这样的东西吗

如果您选择了SVG元素而不是

plotOptions：{
酒吧：{
数据标签：{
启用：对，
allowOverlap：是的，
//如果我们从SVG切换到HTML，标签更容易移动：
是的，
}
}
}

…使用CSS很容易移动它们：

.highcharts-data-labels.highcharts-bar-series{
/*将标签容器拉伸到整个图表区域：*/
右：0；
}
.highcharts-label.highcharts-data-label，
.highcharts-label.highcharts-data-label span{
/*禁用默认标签放置*/
左：自动！重要；
/*..然后把它们放在容器的右侧*/
右：8px；
}

---

您还可以在

渲染事件中定位数据标签：

events: {
  render: function() {
    var chart = this;

    chart.series.forEach(function(s) {
      s.points.forEach(function(p) {
        if (p.dataLabel) {
          p.dataLabel.attr({
            x: chart.plotWidth - p.dataLabel.width
          });
        }
      });
    });
  }
}


现场演示：

API参考：
您还可以在
渲染事件中定位数据标签：

events: {
  render: function() {
    var chart = this;

    chart.series.forEach(function(s) {
      s.points.forEach(function(p) {
        if (p.dataLabel) {
          p.dataLabel.attr({
            x: chart.plotWidth - p.dataLabel.width
          });
        }
      });
    });
  }
}


现场演示：

API参考：
非常感谢，真的帮助了我。你认为与纯CSS方法相比，使用这种方法有任何性能缺陷吗？嗨@Yair Cohen，我不这么认为，数据标签只移动到其他位置，图表没有重新绘制。非常感谢，真的帮助了我。你认为与纯CSS方法相比，使用这种方法有任何性能缺陷吗？嗨@Yair Cohen，我不这么认为，数据标签只移动到其他位置，图表没有重新绘制。