HighCharts XRange系列：如何将数据标签宽度限制在相应的数据点宽度内

我正在高图中使用XRange图表，在高图中我为数据点定制了数据标签。我在两种情况下面临类似的问题：

当数据标签文本长于相应数据点范围的宽度时，它会溢出到相邻数据点的外部并隐藏其标签，如下所示：

在x轴上滚动时，即使数据点范围不足以显示，数据标签也会滑动并溢出。这看起来很混乱

你会注意到这里看起来更糟

如何修复此问题，使数据标签永远不会超出数据点的范围

我尝试过调整“inside”参数，但它只确保标签不会流入相邻行。类似地，我查看了API中的裁剪和溢出选项，但无法根据需要让它为我工作

我知道style中的宽度选项可能会让我解决第一个问题，但我不能为所有标签提供一个以像素为单位的通用绝对值，因为每个标签的宽度都是动态的。另外，第二个问题仍然无法解决

您可以在此处找到重新创建的两个问题：。我需要尽可能优雅地处理这两个问题

是否需要更改数据标签的某些参数

dataLabels: {
            enabled: true,
            defer: false,
            inside: true,
            formatter: function () {
              return 'Too Long Data Label';
            }
        }

---

您可以为每个数据标签动态设置单个宽度样式，并为其定义规则：

events: {
  render: function() {
    if (redrawEnabled) {
      var points = this.series[0].points,
        chart = this,
        dataLabelWidth,
        width;

      redrawEnabled = false;

      Highcharts.each(points, function(point) {
        width = point.shapeArgs.width;

        if (width < 20) {
          point.dataLabel.hide();
        } else {
          point.dataLabel.show();
        }

        point.dataLabel.css({
          width: width
        });
      });

      chart.series[0].isDirty = true;
      chart.redraw();

      redrawEnabled = true;
    }
  }
}

事件：{
render:function（）{
如果（已启用重绘）{
var points=this.series[0]。点，
图表=这个，
dataLabelWidth，
宽度；
重绘启用=错误；
高图。每个（点、功能（点）{
宽度=point.shapeArgs.width；
如果（宽度<20）{
point.dataLabel.hide（）；
}否则{
point.dataLabel.show（）；
}
point.dataLabel.css({
宽度：宽度
});
});
chart.series[0].isDirty=true；
chart.redraw（）；
重绘启用=真；
}
}
}

---

现场演示：

能否附上用于生成当前图表的代码？如果没有电话，人们帮助你会更加单调乏味。请为错过电话而道歉。用示例数据和JS Fiddle包含的链接重新创建了这两个问题。我不确定是否应该为此创建单独的问题，但数据标签是否支持类似的“高度”参数？当我动态设置宽度时，如果文本太长，它会溢出数据点的上方和下方，甚至溢出到相邻的行。我更愿意更优雅地处理它，并将其放在数据点栏中，如果需要，甚至可以截断它。请测试

height

选项，如果它不起作用，请给我提供一些最简单的实例。正如您在此处注意到的，它似乎对我不起作用：。如果向左滚动一点，您会注意到红色数据点上的标签也向下溢出。本质上，我需要包含标签以始终保持在其数据点内，我愿意接受任何方法。您好，是的，我可以看到问题，但遗憾的是，您无法为SVG文本元素设置

高度。我认为您可以尝试使用
useHTML
选项：