Question

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

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

我希望最后的标签（＆＃34; Gggggg＆＃34;）不显示，因为它溢出了它的边界。我尝试过使用dataLabels选项，包括padding，overflow和crop，但都无济于事。

Answer 1

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

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

  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/

Answer 2

您可以对DataLabels使用overflow选项。

点击此处：http://jsfiddle.net/ukfs5qo6/

或者，更具活力的方法：

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

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

以下是一个例子：http://jsfiddle.net/7jdedzy0/ 在这个例子中，我只显示了一些点的标签，这些点的值代表整个地图的5％以上。

希望它有所帮助，问候

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

2 个答案: