如何隐藏溢出的 Highcharts 树状图数据标签？

Question

我想配置一个 Highcharts 树形图，这样如果数据标签足够长以溢出 点边界 （而不是仅仅图表边界），它就会被隐藏。

问题的一个例子可以在这里看到：http://jsfiddle.net/atootspb/

我希望最后的标签 ("Gggggg") 不显示，因为它溢出了它的点边界。我试过 dataLabels 选项，包括 padding、overflow 和 crop，但都无济于事。

Answer 1

您可以对数据标签使用 overflow 选项。

在这里查看：http://jsfiddle.net/ukfs5qo6/

或者，更动态的方法：

您可以使用 formatter 选项完全控制标签。

要具体了解标签是否溢出内容有点难，但您可以获取内容的 width 并计算文本将具有多少像素，然后再决定显示或不显示标签。如果标签没有填满整个标签，您甚至可以只显示标签的一部分。

这是一个例子：http://jsfiddle.net/7jdedzy0/ 在此示例中，我仅显示值占整个地图 5% 以上的点的标签。

希望对您有所帮助，问候

Answer 2

这不能仅通过配置预定义的图表选项来完成。

这是一个可以完成这项工作的自定义代码：

  chart: {
    events: {
      load: function() {
        var points = this.series[0].points;
        points.forEach(function(point) {
          console.log(point);
          if(point.shapeArgs.width < point.dataLabel.width) {
            point.dataLabel.hide();
          }
        });
      }
    }
  },

现场演示： http://jsfiddle.net/BlackLabel/y75whsjr/

如何隐藏溢出的 Highcharts 树状图数据标签？

How do I hide an overflowing Highcharts treemap datalabel?

javascript

treemap

highcharts