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

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

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

введите здесь описание изображения


person heshjse    schedule 09.07.2019    source источник


Ответы (1)


К сожалению, такое поведение не реализовано в ядре. Однако этого можно легко добиться, внедрив собственную логику. В обратном вызове 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);

Демонстрация:

person Wojciech Chmiel    schedule 09.07.2019
comment
Я отправляю графовую модель из серверной части и устанавливаю переднюю часть только для отображения графиков. Эта функция event.render не может отправлять из формата json. есть ли другой способ сделать это? - person heshjse; 12.07.2019
comment
Я отредактировал свой ответ, теперь вы можете добавить этот фрагмент кода после загрузки Highcharts и отправить параметры с помощью json. - person Wojciech Chmiel; 12.07.2019
comment
Не могли бы вы рассказать мне, как использовать это с angular. Я не смог взять point.graphic.width из chart.events.render из angular. он дает значение 0 - person heshjse; 19.07.2019
comment
Конечно, проверьте этот пример Angular: codesandbox.io/s/angular-tst9x. Если мой ответ полезен, отметьте его как правильный и проголосуйте, спасибо. - person Wojciech Chmiel; 22.07.2019