Highcharts – популярная библиотека JavaScript, используемая для создания интерактивных и визуально привлекательных диаграмм и графиков в Интернете. Хотя Highcharts предоставляет отличные возможности для отображения данных, могут возникнуть случаи, когда вам потребуется распечатать эти диаграммы для автономного использования или для обмена с другими. В этой статье мы рассмотрим различные методы печати Highcharts, а также приведем примеры кода, которые помогут вам эффективно их реализовать.

1. Использование функции печати браузера.
   Самый простой способ распечатать Highchart — использовать встроенную функцию печати браузера. Этот метод позволяет пользователям распечатать всю веб-страницу, содержащую Highchart. Чтобы активировать функцию печати, вы можете добавить кнопку печати или указать сочетание клавиш. Вот пример использования JavaScript:

function printChart() {
  window.print();
}

1. Экспорт в виде изображения.
   Highcharts предоставляет встроенный модуль экспорта, который позволяет экспортировать диаграмму в виде файла изображения (PNG, JPEG, SVG или PDF). Затем вы можете использовать стандартный тег HTML <img>для отображения экспортированного изображения и распечатать его с помощью функции печати браузера. Вот пример:

Highcharts.exportChart({
  chart: {
    type: 'column'
  },
  exporting: {
    enabled: true
  },
  series: [{
    data: [1, 3, 2, 4, 5]
  }]
});

1. Использование стилей CSS для печати.
   Другой подход заключается в определении конкретных стилей CSS для печати Highcharts. Вы можете скрыть ненужные элементы, такие как кнопки навигации, всплывающие подсказки и легенды, а также настроить размер диаграммы для улучшения качества печати. Вот пример:

@media print {
  .highcharts-legend,
  .highcharts-tooltip,
  .highcharts-button-symbol {
    display: none;
  }

  .highcharts-container {
    width: 100%;
    height: auto;
  }
}

1. Создание PDF-файлов.
   Если вам требуется больший контроль над выводом на печать, вы можете создавать PDF-документы программно с помощью таких библиотек, как jsPDF или Puppeteer. Эти библиотеки позволяют вам сохранить Highchart в виде изображения и встроить его в документ PDF. Вот пример использования jsPDF:

const doc = new jsPDF();
const chart = Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  series: [{
    data: [4, 2, 5, 1, 3]
  }]
});
const imageData = chart.getSVG();
doc.addImage(imageData, 'JPEG', 10, 10, 180, 100);
doc.save('chart.pdf');

Печать Highcharts можно различными способами, в зависимости от ваших конкретных требований. Предпочитаете ли вы использовать функции печати браузера, экспортировать в виде изображения, применять стили CSS для печати или программно создавать PDF-файлы, теперь у вас есть ряд вариантов на выбор. Поэкспериментируйте с этими методами, чтобы найти тот, который лучше всего соответствует вашим потребностям и улучшает качество печати ваших Highcharts. Приятного кодирования!