Highcharts - ярлыки обрезаны

Question

Есть несколько вопросов по этой теме, но никто не помог мне.

У меня есть веб-приложение, которое визуализирует данные Excel в Highcharts.Пользователь загружает свои данные, а приложение визуализирует их.

Проблема: Метки категорий обрезаются.Это обычно происходит сразу после того, как пользователь загрузил свои данные, при первом просмотре.

Потенциальная причина: Может быть, потому, что мы меняем стиль шрифта при визуализации диаграммы?Я думаю, шрифт по умолчанию - Lucida?И мы меняем его на курьер, и происходит что-то странное?

Примечание: Я не могу использовать фиксированные значения для высоты, ширины, полей.Это зависит от данных.У некоторых есть длинные ярлыки, у некоторых нет.Это динамично.

Answer 1

Это на самом деле ошибка Highcharts, и это происходит потому, что вы используете другой шрифт.Проверьте выпуск GitHub: https://github.com/highcharts/highcharts/issues/6782.

Обходной путь (который не является идеальным) заключается в использовании ширины оси labelGroup для установки левого поля диаграммы с некоторым дополнительным смещением при возникновении события загрузки:

events: {
  load: function() {
    var chart = this,
        xAxis = chart.xAxis[0],
        width;

    width = xAxis.labelGroup.getBBox().width;

    chart.update({
        chart: {
        margin: [50, 50, 100, width + 50]
      }
    }, true, false, false);
  }
}

Демо: https://jsfiddle.net/wchmiel/e1qza6mc/