我创建了这个小提琴,但是当从图表(orgchart谷歌图表)尝试getImageURI()
时,会产生一个错误。
错误:“未捕获的TypeError:chart.getImageURI不是函数”
我需要从创建的orgchart生成图像或PDF。可能吗?
google.charts.load('current', {packages:["corechart","orgchart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
// For each orgchart box, provide the name, manager, and tooltip to show.
data.addRows([
[{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
'', 'The President'],
[{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
'Mike', 'VP'],
['Alice', 'Mike', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
]);
// Create the chart.
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready', function () {
$( "#chart_div2" ).append( '<img src="' + chart.getImageURI() + '">' );
});
// Draw the chart, setting the allowHtml option to true for the tooltips.
chart.draw(data, {allowHtml:true});
}
类似于Table Charts,Org图表生成HTML <table>
元素,而不是SVG
这就是为什么getImageURI
没有列在Methods部分中的任何一个图表
建议使用库将HTML转换为Canvas(html2canvas.js
),
然后可以保存为base64字符串,
类似于getImageURI
看到这个答案,有关该主题的更多信息...... Rendering HTML elements to canvas
试试这段代码:
function printImg() {
html2canvas($('#chart_div').get(0)).then( function (canvas) {
var image = convertCanvasToImage(canvas);
var htmlToPrint = image.outerHTML ;
newWin = window.open("");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
});
}
不要忘记包含html2canvas.js