getImageURI() 在 google 的 orgchart 中不起作用

Mar*_*rin 5 javascript jquery charts google-visualization

小提琴

我创建了这个小提琴,但是当尝试getImageURI()从图表(orgchart 谷歌图表)尝试时,会生成一个错误。

错误:“未捕获类型错误:chart.getImageURI 不是函数”

我需要从创建的组织结构图生成图像或 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});
}
Run Code Online (Sandbox Code Playgroud)

Whi*_*Hat 3

与表格图表类似,组织图表生成 HTML<table>元素,而不是 SVG

这就是为什么getImageURI没有在两个图表的 “方法”部分中列出的原因

推荐使用库将HTML转换为Canvas(html2canvas.js),
然后可以将其保存为base64字符串,
类似于getImageURI

请参阅此答案,了解有关该主题的更多信息...
将 HTML 元素渲染到画布