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

Question

我正在使用高级图表中的XRange图表，在这些图表中我为数据点提供了自定义数据标签。我在2种情况下都面临类似的问题：

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

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

。

您会发现这里看起来更糟；

。

如何解决此问题，以便数据标签永远不会超出数据点范围？

我尝试调整“ inside”参数，但它只能确保标签不会流入相邻的行。同样，我查看了API中的裁剪和溢出选项，但无法根据需要对其进行工作。

我知道样式中的width选项可能会让我解决第一个问题，但是由于每个标签的宽度都是动态的，因此我无法为所有标签都使用一个共同的像素绝对值。另外，第二个问题仍然无法解决。

您可以在此处找到两个重新创建的问题：https://jsfiddle.net/td0bsxg1/4/。我需要尽可能优雅地处理它们。

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

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

Answer 1

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

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;
    }
  }
}

实时演示：https://jsfiddle.net/BlackLabel/wo0q9nzr/