如何打印 AnyGantt 中的所有任务

Question

我正在使用打印 API 打印 AnyGantt 图表，但我只能打印我正在查看的部分，类似于当前屏幕的快照。

是否可以选择以某种方式在可见时间内打印甘特图中存在的所有项目（至少在垂直方向上，例如向下滚动图表并捕获所有项目，如果它们目前不可见则为事件）范围？

谢谢。

Answer 1

这可以通过一些代码技巧来实现。想法是展开图表的 div 容器以显示甘特图中所有现有行，然后打印它，最后将容器的 div 折叠起来。不幸的是，目前没有其他解决方案。下面的代码片段可能无法在 Whosebug playground 中使用。我将在提供打印功能的 AnyChart Playground 中为同一示例留下 link。

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 模块。您可以在下面的评论中获取模块的 link 和使用它的示例。该模块导出enableLargeGanttPrint({Object: chart})函数，获取图表实例，实现打印功能。要打印图表，请在图表上单击鼠标右键并选择 'print' 选项。这将为准备好的甘特图调用标准浏览器打印。

如何打印 AnyGantt 中的所有任务

How to print all the tasks in AnyGantt

gantt-chart

anychart