Как распечатать все задания в AnyGantt

Question

Я печатаю диаграмму AnyGantt, используя API печати, но все, что я могу напечатать, это часть, которую я просматриваю, своего рода снимок текущего экрана.

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

Спасибо.

Answer 1

Это может быть реализовано с помощью нескольких трюков кода. Идея состоит в том, чтобы развернуть контейнер div диаграммы, чтобы показать все существующие строки в диаграмме Ганта, затем распечатать его и, наконец, свернуть блок div контейнера. К сожалению, другого решения для этого сейчас нет. Приведенный ниже фрагмент кода может не работать на игровой площадке stackru. Я оставлю ссылку на тот же образец в AnyChart Playground, который предоставляет функции печати.

anychart.onDocumentReady(function () {
  // The data used in this sample can be obtained from the CDN
  // https://cdn.anychart.com/samples/gantt-charts/activity-oriented-chart/data.js
  anychart.data.loadJsonFile('https://cdn.anychart.com/samples/gantt-charts/activity-oriented-chart/data.json', function (data) {

    var stage = anychart.graphics.create("container");

    // create data tree
    var treeData = anychart.data.tree(data, 'as-table');

    // create project gantt chart
    var chart = anychart.ganttProject();

    // set data for the chart
    chart.data(treeData);

    // set start splitter position settings
    chart.splitterPosition(370);

    // get chart data grid link to set column settings
    var dataGrid = chart.dataGrid();

    // set first column settings
    dataGrid.column(0)
      .title('#')
      .width(30)
      .labels({hAlign: 'center'});

    // set second column settings
    dataGrid.column(1)
      .labels()
      .hAlign('left')
      .width(180);

    // set third column settings
    dataGrid.column(2)
      .title('Start Time')
      .width(70)
      .labels()
      .hAlign('right')
      .format(function () {
      var date = new Date(this.actualStart);
      var month = date.getUTCMonth() + 1;
      var strMonth = (month > 9) ? month : '0' + month;
      var utcDate = date.getUTCDate();
      var strDate = (utcDate > 9) ? utcDate : '0' + utcDate;
      return date.getUTCFullYear() + '.' + strMonth + '.' + strDate;
    });

    // set fourth column settings
    dataGrid.column(3)
      .title('End Time')
      .width(80)
      .labels()
      .hAlign('right')
      .format(function () {
      var date = new Date(this.actualEnd);
      var month = date.getUTCMonth() + 1;
      var strMonth = (month > 9) ? month : '0' + month;
      var utcDate = date.getUTCDate();
      var strDate = (utcDate > 9) ? utcDate : '0' + utcDate;
      return date.getUTCFullYear() + '.' + strMonth + '.' + strDate;
    });

    // calculate height
    var traverser = treeData.getTraverser();
    var itemSum = 0;
    var rowHeight = chart.defaultRowHeight();
    while (traverser.advance()){
       if (traverser.get('rowHeight')) {
      itemSum += traverser.get('rowHeight');
    } else {
     itemSum += rowHeight;
    }
    if (chart.rowStroke().thickness != null) {
     itemSum += chart.rowStroke().thickness;
    } else {
      itemSum += 1;
    }
    }
    itemSum += chart.headerHeight();
    
    //customize printing
    var menu = chart.contextMenu();
    menu.itemsFormatter(function(items) {
      items['print-chart'].action = function() {
        document.getElementById('container').style.height = String(itemSum) + 'px';
        setTimeout(function() {
          chart.print();
          setTimeout(function() {
            document.getElementById('container').style.height = '100%';
          },5000);
        },1000);
      }
      return items;
    });

    chart.container(stage).draw();
    chart.zoomTo(951350400000, 954201600000);
  });
});

html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

<link href="https://cdn.anychart.com/releases/8.2.1/fonts/css/anychart-font.min.css" rel="stylesheet"/>
<link href="https://cdn.anychart.com/releases/8.2.1/css/anychart-ui.min.css" rel="stylesheet"/>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-bundle.min.js"></script>
<div id="container"></div>

Answer 2

Мы рады сообщить, что создали модуль JS для печати больших диаграмм Ганта. Вы можете получить ссылку на модуль и пример использования в комментарии ниже. Этот модуль экспортирует функцию enableLargeGanttPrint({Object: chart}), которая получает экземпляр диаграммы и реализует функции печати. Чтобы распечатать график, нажмите правую кнопку мыши на графике и выберите опцию "печать". Это вызовет стандартную браузерную печать для подготовленной диаграммы Ганта.