как ограничить размер этикетки только для диаметра пузырьков в верхних графиках - PullRequest
Новая
       88

как ограничить размер этикетки только для диаметра пузырьков в верхних графиках

0 голосов
/ 09 июля 2019

В моих высоких графиках некоторые пузырьки имеют длинные метки. Мне нужно ограничить эту метку только размером диаметра этого пузыря. (В качестве примера текущий граф XIMT-DL должен быть XIMT ...). Вы знаете, как это сделать?

code example: пример кода

enter image description here

1 Ответ

1 голос
/ 09 июля 2019

К сожалению, это поведение не реализовано в ядре. Тем не менее, это может быть легко достигнуто путем реализации вашей пользовательской логики. В обратном вызове chart.events.render проверьте ширину каждой точки и ширину ее метки данных. Когда метка данных шире, чем точка, просто обрежьте ее и добавьте точки, если это необходимо. Проверьте код и демоверсия размещена ниже:

Код: 

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

          });
        })
      }
    }
  }

Демо-версия:

Справочник по API:

Другой подход - добавить прослушиватель событий 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);

Демо-версия:

...