我正在使用打印API打印AnyGantt图表,但我可以打印的是我正在查看的部分,这是当前屏幕的快照。
是否有选项以某种方式打印甘特图中存在的所有项目(至少在垂直方向上,例如向下滚动图表并捕获所有项目,如果它们此刻不可见,则会在可见时间范围内显示)?
谢谢。
答案 0 :(得分:1)
这可以通过一些代码技巧来实现。我们的想法是扩展图表的div容器以显示甘特图中的所有现有行,然后打印它,最后将容器的div拆开。不幸的是,目前还没有其他解决方案。下面的代码段可能无法在stackoverflow游乐场中使用。我将在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>
&#13;
答案 1 :(得分:0)
很高兴通知您,我们已经创建了一个JS模块,用于打印大型甘特图。您可以在下面的注释中获得该模块的链接和使用示例。 此模块导出enableLargeGanttPrint({Object:chart})函数,该函数获取图表实例并实现打印功能。要打印图表,请在图表上单击鼠标右键,然后选择“打印”选项。这将为准备好的甘特图调用标准浏览器打印。