无法导出包含 DIV 个元素的 c3.js 个图表
Unable to export c3.js charts with DIV elements
我使用 c3.js
创建了这张图表
顶部的两个 text/number 行在 Div 中。左下角的两个按钮成功地将此 SVG 图表转换为 png 和 pdf。现在我的客户希望将顶部的两个文本行导出为 PDF 和 JPG。但是 PDF 和 JPG 程序只导出 SVG 元素。如何添加具有相同格式的 SVG 的这两个文本行,以便它们可以与图表一起导出?
我尝试使用此 javascript 代码将 div 添加到 SVG 元素中。
var ns = 'http://www.w3.org/2000/svg';
var svg = document.querySelector( 'svg' );
var foreignObject = document.createElementNS( ns, 'foreignObject');
foreignObject.setAttribute('height', 300);
foreignObject.setAttribute('width', '100%');
var div = document.createElement('div');
div.innerHTML = '<div><div class="export-text"><span class="export-text-heading">{{DISPLAY DATA HERE}}</span></div></div>';
foreignObject.appendChild( div );
svg.appendChild(foreignObject);
里面有多个div
输出。但是 JPG 和 PDF 导出程序不允许导出 div 并显示此错误。
There was an error loading the data URI as an image on the following
SVG
我的 PDF 导出代码是
function export_pdf_tracker(){
$('#chart-tracker').find('svg').attr('xmlns','http://www.w3.org/2000/svg');
xepOnline.Formatter.Format('chart-tracker',{pageWidth:'20in', pageHeight:'15.5in',render:'download', srctype:'svg', filename:'Activity-Tracker-Report', resolution:'300', cssStyle:[{fontSize:'40px'},{fontWeight:'bold'}]});
}
我的 PNG/JPG 导出代码是
function svgToPng(chartID) {
//fix weird back fill
d3.select('#'+chartID).selectAll("path").attr("fill", "none");
//fix no axes
d3.select('#'+chartID).selectAll("path.domain").attr("stroke", "black");
//fix no tick
d3.select('#'+chartID).selectAll(".tick line").attr("stroke", "black");
var svgElement = $('#'+chartID).find('svg')[0];
saveSvgAsPng(svgElement, chartID+'.png');
}
两个代码都成功运行,但不适用于 div
元素。
这是我在图表上添加 div 时的显示方式。
但无法使用 div
导出。请建议是否有任何方法可以在 SVG 图形中添加这两行的布局,以便它可以轻松导出,或者是否有任何代码可以将 div 转换为 svg?
我找到了答案。我已经编写了这段代码来添加每个文本块。所以我创建了 8 个文本块。现在它们可以完美地导出为 JPG 和 PDF。
d3.select("#chart-tracker svg").append("text")
.attr("x", 780 )
.attr("y", 50)
.style("text-anchor", "left")
.style("font-size", "17px")
.text("Start Date");
我使用 c3.js
创建了这张图表顶部的两个 text/number 行在 Div 中。左下角的两个按钮成功地将此 SVG 图表转换为 png 和 pdf。现在我的客户希望将顶部的两个文本行导出为 PDF 和 JPG。但是 PDF 和 JPG 程序只导出 SVG 元素。如何添加具有相同格式的 SVG 的这两个文本行,以便它们可以与图表一起导出?
我尝试使用此 javascript 代码将 div 添加到 SVG 元素中。
var ns = 'http://www.w3.org/2000/svg';
var svg = document.querySelector( 'svg' );
var foreignObject = document.createElementNS( ns, 'foreignObject');
foreignObject.setAttribute('height', 300);
foreignObject.setAttribute('width', '100%');
var div = document.createElement('div');
div.innerHTML = '<div><div class="export-text"><span class="export-text-heading">{{DISPLAY DATA HERE}}</span></div></div>';
foreignObject.appendChild( div );
svg.appendChild(foreignObject);
里面有多个div
输出。但是 JPG 和 PDF 导出程序不允许导出 div 并显示此错误。
There was an error loading the data URI as an image on the following SVG
我的 PDF 导出代码是
function export_pdf_tracker(){
$('#chart-tracker').find('svg').attr('xmlns','http://www.w3.org/2000/svg');
xepOnline.Formatter.Format('chart-tracker',{pageWidth:'20in', pageHeight:'15.5in',render:'download', srctype:'svg', filename:'Activity-Tracker-Report', resolution:'300', cssStyle:[{fontSize:'40px'},{fontWeight:'bold'}]});
}
我的 PNG/JPG 导出代码是
function svgToPng(chartID) {
//fix weird back fill
d3.select('#'+chartID).selectAll("path").attr("fill", "none");
//fix no axes
d3.select('#'+chartID).selectAll("path.domain").attr("stroke", "black");
//fix no tick
d3.select('#'+chartID).selectAll(".tick line").attr("stroke", "black");
var svgElement = $('#'+chartID).find('svg')[0];
saveSvgAsPng(svgElement, chartID+'.png');
}
两个代码都成功运行,但不适用于 div
元素。
这是我在图表上添加 div 时的显示方式。
但无法使用 div
导出。请建议是否有任何方法可以在 SVG 图形中添加这两行的布局,以便它可以轻松导出,或者是否有任何代码可以将 div 转换为 svg?
我找到了答案。我已经编写了这段代码来添加每个文本块。所以我创建了 8 个文本块。现在它们可以完美地导出为 JPG 和 PDF。
d3.select("#chart-tracker svg").append("text")
.attr("x", 780 )
.attr("y", 50)
.style("text-anchor", "left")
.style("font-size", "17px")
.text("Start Date");