Question

我正在使用打印API打印AnyGantt图表，但我可以打印的是我正在查看的部分，这是当前屏幕的快照。

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

谢谢。

Answer 1

这可以通过一些代码技巧来实现。我们的想法是扩展图表的div容器以显示甘特图中的所有现有行，然后打印它，最后将容器的div拆开。不幸的是，目前还没有其他解决方案。下面的代码段可能无法在stackoverflow游乐场中使用。我将在AnyChart Playground中提供相同样本的链接，该链接提供打印功能。

＆＃13;

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);
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

很高兴通知您，我们已经创建了一个JS模块，用于打印大型甘特图。您可以在下面的注释中获得该模块的链接和使用示例。此模块导出enableLargeGanttPrint（{Object：chart}）函数，该函数获取图表实例并实现打印功能。要打印图表，请在图表上单击鼠标右键，然后选择“打印”选项。这将为准备好的甘特图调用标准浏览器打印。

如何在AnyGantt中打印所有任务

2 个答案: