如何隐藏溢出的Highcharts树图数据标签? [英] How do I hide an overflowing Highcharts treemap datalabel?

问题描述

我想配置一个Highcharts树形图，以便如果datalabel足够长以溢出点界限(而不是仅图表界限)，则将其隐藏.

I want to configure a Highcharts treemap so that if the datalabel is long enough to overflow the point bounds (as opposed to just the chart bounds), it is hidden.

可以在此处看到该问题的示例: http://jsfiddle.net/atootspb/

An example of the problem can be seen here: http://jsfiddle.net/atootspb/

我不想显示最终标签("Gggggg")，因为它超出了其点的边界.我尝试使用dataLabels选项(包括padding，overflow和crop)进行尝试，但无济于事.

I would like the final label ("Gggggg") not to display since it overflows its point's boundaries. I have tried experimenting with the dataLabels options including padding, overflow and crop, all to no avail.

推荐答案

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

This can't be done just by configuring predefined chart options.

这是完成任务的自定义代码:

Here's a custom code that'll do the job:

  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树图数据标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！