使用canvg 将Highchart SVG 转PNG 时,所有文本出现两次 - 如何解决?
When using canvg to convert Highchart SVG into PNG, all text appears twice - how to solve?
这是我的(截断的)示例 SVG 图片(用 Highcharts 制作,http://www.highcharts.com/ ) - when I render that onto a canvas (with canvg (https://github.com/gabelerner/canvg and code adapted from here: )生成的 PNG 中的所有文本都是重复的,这意味着它是双重输出,一段文本紧接着是相同的文本一次再次。如何确保它只出现一次?
<svg height="400" width="1170" version="1.1" xmlns="http://www.w3.org/1999/svg">
<text zIndex="8" text-anchor="end" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:9px;cursor:pointer;color:#909090;fill:#909090;" y="22" x="220">
<tspan x="220">Highcharts.com</tspan>
</text>
</svg>
在我的示例 SVG 图像中删除了很多部分之后,为了找出错误何时会消失,我发现它是 tspan
标签 - 一旦我将它们排除在外,canvg 将按预期仅显示一次文本.
这个问题有点老了,但我也发现我的图表中有这个双文本错误很烦人。我查看了代码并将其修改为与 tspan 一起使用。我并没有真正深入研究它,所以我不了解库中发生的所有机制,但我注意到对于 "tspan",在某些时候,创建的对象是:
- 嗯,一个对象,具有类型 "tspan" 和文本属性。
- 并且该对象还包含另一个对象,即 tspan 的文本值(与前面的文本属性相同)
所以我所做的就是修改库的源代码。如果您搜索
// tspan
svg.Element.tspan = function(node) {
然后你只需要在函数中添加这个(替换旧内容):
if ( node.nodeName == "tspan")
this.text = '' ;
else
this.text = node.value || node.text || node.textContent || '';
这解决了我的问题。我希望对某人有所帮助。
<!-- Client Side Code -->
<script type="text/javascript">
window.onload = function() {
//1. Get the Highcharts Graph from the Div containing it
var chart = $('#IDOfDivContainingHighchartsGraph').highcharts();
//2. Get SVG from Hicharts Export Service
var svgString = chart.getSVGForExport();
//3. Save it client side div to manipulate the fetched string
$('#exportedSVG').html(svgString);
//4. LOGIC TO REMOVE THE DUPLICATE TSPAN TAG
var svgTSPAN_TextElement=$("#exportedSVG text");
for(i=0;i<svgTSPAN_TextElement.length;i++){
childTspanElements=$(svgTSPAN_TextElement[i]).children("tspan");
if(childTspanElements.length==2){
childTspanElements[1].remove();
}
}
//5. Get the maniupluated object as string
svgString=$("#exportedSVG svg").get(0).outerHTML;
//6. POST Maniiulated SVG string
var url= '/URL/To/Server/Side.php';
$.ajax({
type: 'POST',
data: {svgString:svgString, upload:1},
url: url,
async: false,
success: function(data){
//Nothing here
}
});
}
</script>
//Server Side Code
<?php
if(isset($_POST["upload"])){
$SVGData=$_POST["svgString"];
$locationToSaveFile = "/location/to/Save/SVGFILE.svg";
file_put_contents($locationToSaveFile, $SVGData);
exit();
}
//By the end of this code you would have created the svg file of the hicharts on the server side
?>
我刚刚在您的导出参数中添加了 textOutline: 'none',它对我有用。
Codpen 与解决方案
https://codepen.io/kirill-kirs/pen/qBjNdwg
exporting: {
sourceWidth: 1000,
sourceHeight: 1000,
chartOptions: {
plotOptions: {
series: {
dataLabels: {
enabled: true,
backgroundColor: 'rgba(0, 0, 0, 0.75)',
style: {
textOutline: 'none',
color: 'white'
}
}
}
}
}
}
这是我的(截断的)示例 SVG 图片(用 Highcharts 制作,http://www.highcharts.com/ ) - when I render that onto a canvas (with canvg (https://github.com/gabelerner/canvg and code adapted from here: )生成的 PNG 中的所有文本都是重复的,这意味着它是双重输出,一段文本紧接着是相同的文本一次再次。如何确保它只出现一次?
<svg height="400" width="1170" version="1.1" xmlns="http://www.w3.org/1999/svg">
<text zIndex="8" text-anchor="end" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:9px;cursor:pointer;color:#909090;fill:#909090;" y="22" x="220">
<tspan x="220">Highcharts.com</tspan>
</text>
</svg>
在我的示例 SVG 图像中删除了很多部分之后,为了找出错误何时会消失,我发现它是 tspan
标签 - 一旦我将它们排除在外,canvg 将按预期仅显示一次文本.
这个问题有点老了,但我也发现我的图表中有这个双文本错误很烦人。我查看了代码并将其修改为与 tspan 一起使用。我并没有真正深入研究它,所以我不了解库中发生的所有机制,但我注意到对于 "tspan",在某些时候,创建的对象是:
- 嗯,一个对象,具有类型 "tspan" 和文本属性。
- 并且该对象还包含另一个对象,即 tspan 的文本值(与前面的文本属性相同)
所以我所做的就是修改库的源代码。如果您搜索
// tspan
svg.Element.tspan = function(node) {
然后你只需要在函数中添加这个(替换旧内容):
if ( node.nodeName == "tspan")
this.text = '' ;
else
this.text = node.value || node.text || node.textContent || '';
这解决了我的问题。我希望对某人有所帮助。
<!-- Client Side Code -->
<script type="text/javascript">
window.onload = function() {
//1. Get the Highcharts Graph from the Div containing it
var chart = $('#IDOfDivContainingHighchartsGraph').highcharts();
//2. Get SVG from Hicharts Export Service
var svgString = chart.getSVGForExport();
//3. Save it client side div to manipulate the fetched string
$('#exportedSVG').html(svgString);
//4. LOGIC TO REMOVE THE DUPLICATE TSPAN TAG
var svgTSPAN_TextElement=$("#exportedSVG text");
for(i=0;i<svgTSPAN_TextElement.length;i++){
childTspanElements=$(svgTSPAN_TextElement[i]).children("tspan");
if(childTspanElements.length==2){
childTspanElements[1].remove();
}
}
//5. Get the maniupluated object as string
svgString=$("#exportedSVG svg").get(0).outerHTML;
//6. POST Maniiulated SVG string
var url= '/URL/To/Server/Side.php';
$.ajax({
type: 'POST',
data: {svgString:svgString, upload:1},
url: url,
async: false,
success: function(data){
//Nothing here
}
});
}
</script>
//Server Side Code
<?php
if(isset($_POST["upload"])){
$SVGData=$_POST["svgString"];
$locationToSaveFile = "/location/to/Save/SVGFILE.svg";
file_put_contents($locationToSaveFile, $SVGData);
exit();
}
//By the end of this code you would have created the svg file of the hicharts on the server side
?>
我刚刚在您的导出参数中添加了 textOutline: 'none',它对我有用。
Codpen 与解决方案 https://codepen.io/kirill-kirs/pen/qBjNdwg
exporting: {
sourceWidth: 1000,
sourceHeight: 1000,
chartOptions: {
plotOptions: {
series: {
dataLabels: {
enabled: true,
backgroundColor: 'rgba(0, 0, 0, 0.75)',
style: {
textOutline: 'none',
color: 'white'
}
}
}
}
}
}