Несколько Highcharts на странице PDF - макет страницы SVG - PullRequest
0 голосов
/ 25 февраля 2019

Я разработал экспорт нескольких старших графиков на одной странице PDF (макет A3), которая состоит из 6 графиков и относительного текста.

Функциональность работает нормально.Ниже приведена ссылка для моего кода.

Ссылка

Когда я нажимаю кнопку «Экспорт PDF», загружается файл PDF со всеми диаграммами и текстом.(Я скопировал только 1 диаграмму в примере).

Когда вы нажимаете Ctrl + P на загруженном документе, чтобы распечатать, пользователь может увидеть много дополнительных пробелов в верхней и нижней части окна.страница в формате pdfТам не должно быть таких дополнительных пробелов.В загруженном документе такого пробела нет.

Как изменить элементы SVG для высоты и ширины таких вопросов.

White space

$(function () {


Highcharts.getSVG = function(charts,texts, options, callback) {


var svgArr = [],
top = 0,
width = 0,
newLine = false,
txt,txt1,txt2,txt3,txt4,txt5,txt6,txt7,txt8,txt9,txt10,txt11,txt12,txt13,txt14,txt15,txt16,txt17,txt18,txt19,txt20,txt21,txt22,txt23,txt24,txt25,txt26;
addSVG = function(svgres,i) {


  // Grab width/height from exported chart
  var svgWidth = +svgres.match(
      /^<svg[^>]*width\s*=\s*\"?(\d+)\"?[^>]*>/
    )[1],
    svgHeight = +svgres.match(
      /^<svg[^>]*height\s*=\s*\"?(\d+)\"?[^>]*>/
    )[1],
    // Offset the position of this chart in the final SVG
    svg;




      if (svgWidth > 900) {
          if(i==5){
              top = 1000;
              svg = svgres.replace('<svg', '<g transform="translate(0,' + top + ')"');
          }else{
              svg = svgres.replace('<svg', '<g transform="translate(' + width + ', 0 )"');
          }

        top = Math.max(top, svgHeight);

      } else {
        if (newLine) {
          if(i==4){
              width = 800;
          }
          svg = svgres.replace('<svg', '<g transform="translate(' + width + ', ' + top + ')"');
          top += svgHeight;
          width += svgWidth;
          newLine = false;
        } else {
          newLine = true;
          if(i==5){
              top = 1000;
              svg = svgres.replace('<svg', '<g transform="translate(0,' + top + ')" ');
          }else{
              svg = svgres.replace('<svg', '<g transform="translate(0,' + top + ')" ');
          }

          top = Math.max(top, svgHeight);
          width += svgWidth;
          //width = Math.max(width, chart.chartWidth);
        }
      }



  svg = svg.replace('</svg>', '</g>');
  svgArr.push(svg);

   txt = texts[i];

},
exportChart = function(i) {
  if (i === charts.length) {

      // add SVG image to exported svg
    //addSVG(svgImg.outerHTML);
    //addSVG(svgImg.outerHTML);

      //console.log(top+'-----'+width);
    return callback('<svg height="2000" width="2000" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>');
  }
  charts[i].getSVGForLocalExport(options, {}, function() {
    console.log("Failed to get SVG");
  }, function(svg) {
    addSVG(svg,i);
    return exportChart(i + 1); // Export next only when this SVG is received
  });
};

//console.log(svgArr);  
exportChart(0);
};

Highcharts.exportCharts = function(charts,texts, options) {
options = Highcharts.merge(Highcharts.getOptions().exporting, options);

// Get SVG asynchronously and then download the resulting SVG
Highcharts.getSVG(charts,texts, options, function(svg) {
Highcharts.downloadSVGLocal(svg, options, function() {
  console.log("Failed to export on client side");
});
});
};

//Set global default options for all charts
Highcharts.setOptions({
exporting: {
fallbackToExportServer: false // Ensure the export happens on the client side or not at all
}
});

Если я увеличу высоту в SVG, то она также увеличит ширину

 return callback('<svg height="2000" width="2000" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>');

Red color mark in white space

1 Ответ

0 голосов
/ 06 марта 2019

Ваш SVG формирует квадратное изображение 2000x2000 (height="2000" width="2000").

Ваш принтер, вероятно, настроен на печать формата A4 или Letter, что составляет 210 × 297 миллиметров (для A4) - не квадратное.

Кроме того, ваш принтер пытается центрировать содержимое вашего документа (PDF), что приводит к появлению пустого пространства и под вашими графиками.

Существует 3 очень простых решения:

  1. Установите ваш принтер так, чтобы он печатал ваш файл вверху страницы
  2. Измените размер графиков так, чтобы он соответствовал вашей печатной странице (например, height="2100" width="2970")
  3. Изменитьразмер вашего документа pdf, так что ваш экспортированный документ уже соответствует графику SVG вверху
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...