如何在 highcharts 中仅限制气泡直径的标签大小

Question

在我的高图表中，一些气泡很长 labels.I 需要限制该标签仅用于该气泡的直径大小。（例如，流动图 XIMT-DL 应该是 XIMT...）。你知道怎么做吗？

code example: code example

Answer 1

遗憾的是，此行为未在核心中实现。但是，可以通过实施您的自定义逻辑轻松实现。在 chart.events.render 回调中检查每个点的宽度及其数据标签的宽度。当数据标签比点宽时，只需 trim 它并在必要时添加点。检查代码和演示如下：

代码：

  chart: {
    type: 'packedbubble',
    height: '100%',
    events: {
      render: function() {
        const chart = this;

        chart.series.forEach(series => {
          series.points.forEach(point => {

            if (point.graphic.width > 1) {
              if (point.dataLabel.width > point.graphic.width) {
                let indic = (
                    (point.dataLabel.width - point.graphic.width) /
                    point.dataLabel.width
                  ),
                  text = point.series.name,
                  textLen = text.length,
                  maxTextLen = Math.floor(textLen * (1 - indic)),
                  newText,
                  dotted,
                  substringLen;

                dotted = maxTextLen > 2 ? '..' : '.';
                substringLen = maxTextLen > 2 ? 2 : 1;
                newText = text.substring(0, maxTextLen - substringLen) + dotted;

                point.dataLabel.text.element.innerHTML =
                  '<tspan>' + newText + '</tspan>';

                point.dataLabel.text.translate(
                  (point.dataLabel.width - point.graphic.width) / 2,
                  0
                );
              }
            }

          });
        })
      }
    }
  }

演示：

https://jsfiddle.net/BlackLabel/2zdLqt3j/

API参考：

https://api.highcharts.com/highcharts/chart.events.render

另一种方法是添加事件侦听器 afterRender 并修改那里的标签，以便单独定义图表选项。

代码：

(function(H) {
  H.addEvent(H.Series, 'afterRender', function() {
    console.log(this);

    const chart = this.chart;

    chart.series.forEach(series => {
      if (series.points && series.points.length) {
        series.points.forEach(point => {

          if (point.graphic.width > 1) {
            if (point.dataLabel.width > point.graphic.width) {
              let indic = (
                  (point.dataLabel.width - point.graphic.width) /
                  point.dataLabel.width
                ),
                text = point.series.name,
                textLen = text.length,
                maxTextLen = Math.floor(textLen * (1 - indic)),
                newText,
                dotted,
                substringLen;

              dotted = maxTextLen > 2 ? '..' : '.';
              substringLen = maxTextLen > 2 ? 2 : 1;
              newText = text.substring(0, maxTextLen - substringLen) + dotted;

              point.dataLabel.text.element.innerHTML =
                '<tspan>' + newText + '</tspan>';

              point.dataLabel.text.translate(
                (point.dataLabel.width - point.graphic.width) / 2,
                0
              );
            }
          }

        });
      }
    })
  });
})(Highcharts);

演示：

https://jsfiddle.net/BlackLabel/er9ahqnb/1/

如何在 highcharts 中仅限制气泡直径的标签大小

how to limit the label size only for bubble diameter in high charts

bubble-chart

highcharts